WordPress部署H5播放器,支持m3u8/MP4/WebM和Ogg格式

测试视频


(拿妇联4开的刀,资源网上随便找的,资源视频带赌场垃圾广告,别信。)


[videojs url="https://www.mycqzx.com:65/20190822/V3leg45J/index.m3u8"]


教程如下


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.使用说明
3.1 添加方法
如果要播放m3u8格式的视频,只需要在文本模式下添加如下短代码,并将文字视频封面和视频地址改为你需要添加的信息


[videojs poster="视频封面" url="视频地址"】
最后的】括号换成]


如果要播放mp4/ogg和webm格式,就将代码中的url改为你要播放的格式,如播放mp4:


[videojs poster="视频封面" mp4="视频地址"】
最后的】括号换成]


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;


[tip type="tip success" ]

据说好多邪恶视频可都是m3u8格式的,把自己的小站变成一个美妙的网站岂不妙哉,不过还是得遵守当地法规。。。。

[/tip]

WordPress

wordpress无需插件实现回复评论可见

2020-3-11 23:14:06

WordPress

给nirvana主题加个深色夜间模式

2020-3-15 18:32:54

2 条回复 A文章作者 M管理员
  1. odmin

    有个小bug,首次打开这个页面,视频可能没有加载出来,需要刷新下才可以,不知道是不是因为远程加载js的问题

    • odmin

      经查实是因为放了封面图的原因