WordPress纯代码部署VideoJs视频播放器
wordpress 纯代码部署视频播放器——VideoJs视频播放器。支持m3u8/MP4/WebM和Ogg格式。Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。
全局引用
1 | //cdn.bootcss.com/video.js/5.11.2/alt/video-js-cdn.min.css |
1 | //cdn.bootcss.com/video.js/5.11.2/alt/video.novtt.min.js |
打开主题functions.php文件,添加如下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | function videojs_html5($atts) { extract(shortcode_atts(array( 'url' => '', 'webm' => '', 'ogv' => '', 'width' => '', 'controls' => '', 'preload' => 'auto', 'autoplay' => 'false', 'loop' => '', 'muted' => '', 'poster' => '', 'class' => '', ), $atts)); if(empty($url)){ return __('you need to specify the src of the video file', 'videojs-html5-player'); } //src $src = '<source src="'.$url.'" type="video/mp4" />'; if (!empty($webm)) { $webm = '<source src="'.$webm.'" type="video/webm" />'; $src = $src.$webm; } if (!empty($ogv)) { $ogv = '<source src="'.$ogv.'" type="video/ogg" />'; $src = $src.$ogv; } //controls if($controls == "false") { $controls = ""; } else{ $controls = " controls"; } //preload if($preload == "metadata") { $preload = ' preload="metadata"'; } else if($preload == "none") { $preload = ' preload="none"'; } else{ $preload = ' preload="auto"'; } //autoplay if($autoplay == "true"){ $autoplay = " autoplay"; } else{ $autoplay = ""; } //loop if($loop == "true"){ $loop = " loop"; } else{ $loop = ""; } //muted if($muted == "true"){ $muted = " muted"; } else{ $muted = ""; } //poster if(!empty($poster)) { $poster = ' poster="'.$poster.'"'; } $player = "videojs" . uniqid(); //custom style $style = ''; if(!empty($width)){ $style = <<<eot <style> #$player { max-width:{$width}px; } </style> EOT; } $output = <<<eot <video id="$player" class="video-js vjs-default-skin"{$controls}{$preload}{$autoplay}{$loop}{$muted}{$poster} data-setup='{"fluid": true}'> $src </video> $style EOT; return $output; } add_shortcode('videojs_video','videojs_html5'); |
使用说明
有以下几种插入视频方式
1 | [videojs poster="视频封面" url="视频地址"] |
1 | [videojs poster="视频封面" mp4="视频地址"] |
1 | [videojs_video url="这里输入视频的 URL 地址"] |