WordPress部署H5播放器Video.js,支持m3u8/MP4/WebM和Ogg格式
m3u8格式的视频在网页上拥有更快的加载速度,但是HTML5的video
标签只支持MP4
/WebM
和Ogg
格式。最终,虫子菌为WordPress部署了在Github拥有25106个Star的Video.js
播放器。
1.全局引入
1.1 CSS
打开wordpress主题目录,找到页首文件header.php
,在/head
标签前添加如下代码。
- <link href="https://cdn.bootcss.com/video.js/7.5.4/video-js.min.css" rel="stylesheet">
1.2 JS
找到页脚文件footer.php
,在/body
标签前添加如下代码。
- <script src="https://cdn.bootcss.com/video.js/7.5.4/video.min.js"></script>
video.js v6
版本之前,播放基于HLS协议的m3u8视频需要引入video.min.js
和videojs-contrib-hls.min.js
两个JS文件,在v7版之后只引入video.min.js一个JS文件即可。
2.部署项目
打开主题functions.php
文件,添加如下代码
//videojs /* WordPress部署H5播放器Video.js教程演示 https://www.cccitu.com/4362.html */ function videojs_html5($atts) { extract(shortcode_atts(array( 'url' => '', 'webm' => '', 'ogv' => '', 'mp4' => '', 'width' => '', 'controls' => '', 'preload' => 'auto', 'autoplay' => 'false', 'loop' => 'false', 'muted' => '', 'poster' => '', 'class' => '', ), $atts)); if(empty($url)){ return __('you need to specify the src of the video file', 'videojs-html5-player'); } //poster $poster = 'poster="'.$poster.'"'; //src $src = '<source src="'.$url.'" type="application/x-mpegURL" />'; 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; } if (!empty($mp4)) { $mp4 = '<source src="'.$mp4.'" type="video/mp4" />'; $src = $src.$mp4; } //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 = ""; } //custom style $output = <<<EOT <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" width="100%" height="264"{$poster}{$controls}{$preload}{$autoplay}{$loop}{$muted} data-setup='{}'> $src </video> EOT; return $output; } add_shortcode('videojs','videojs_html5');
3.2 参数说明
- 'url' => '',
- 'webm' => '',
- 'ogv' => '',
- 'mp4' => '',
- 'width' => '',
- 'controls' => '',
- 'preload' => 'auto',
- 'autoplay' => 'false',
- 'loop' => 'false',
- 'muted' => '',
- 'poster' => '',
- 'class' => '',
在functions.php添加的代码中,有如上部分,我们主要看以下几个参数
autoplay
:
自动播放选项,true允许自动播放,false禁止自动播放,默认false,具体写法:
- 'autoplay' => 'true',
- 'autoplay' => 'false',
controls
:
控制条选择,true显示控制条,false禁止显示控制条,默认true,具体写法:
- 'controls' => 'true',
- 'controls' => 'false',
loop
:
循环播放选项, true视频播放结束后循环播放,false播放结束后禁止循环播放,具体写法:
- 'loop' => 'true',
- 'loop' => 'false',
muted
:
静音选项, true默认静音播放,false默认非静音播放,具体写法:
- 'muted' => 'true',
- 'muted' => 'false',
preload
:
预加载选项,auto自动判断,metadata加载视频长度,尺寸等元数据信息 ,none不预加载任何数据,直到用户点击开始播放才加载视频文件数据。
- 'preload' => 'auto',
- 'preload' => 'metadata',
- 'preload' => 'none',
注意事项
当使用m3u8格式视频时,需要注意跨域问题,如果视频网址和加载个视频网站的网址不一样,一定要在视频文件所在服务器或CDN上设置跨域。
允许所有网站引用
- add_header Access-Control-Allow-Origin *;
将*改为具体的域名,则是仅允许该域名引用,如只允许cccitu.com引用
- add_header Access-Control-Allow-Origin cccitu.com;
1、本站资源都是白菜价出售,同样的东西,我们不卖几百,也不卖几十,甚至才卖几块钱,一个永久会员能下载全站100%源码了,所以单独购买也好,会员也好均不提供相关技术服务。
2、如果源码下载地址失效请/联系站长QQ进行补发。
3、本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!
4、本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,【源码源码ui网】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。
5、请您认真阅读上述内容,购买即以为着您同意上述内容。
EB站 » WordPress部署H5播放器Video.js,支持m3u8/MP4/WebM和Ogg格式