wordpress使用 Video.js 纯代码为文章插入直播m3u8视频播放器的方法

隔壁小色

2023-12-1

各类教程

大家也知道，wordpress自带的视频播放器，只能播放视频文件，比如MP4/WebM和Ogg，不能播放流媒体文件。

所以就找了个可以直接在wordpress文章网页中插入m3u8直播流媒体的方法。

这个方法是手动在主题中添加代码，然后在文章中用代码调用，比直接安装插件要稍微麻烦点，觉得麻烦的可以直接安装插件。

安装流程

手动在主题文件的 header.php 和 footer.php 中添加video.js的代码

手动在主题文件的 functions.php 中添加代码

在发布文章的编辑中，使用文本选项，用代码的方式插入m3u8流媒体

先说第一步，手动添加 video.js 代码

可以按照下面内容添加公共cdn服务器的代码，可能载入速度比较慢

也可以自己下载，解压到自己服务器，用自己的代码，一个意思。

video.js 的github：https://github.com/videojs/video.js/releases

找到后台，wordpress 当前使用主题的页首文件 header.php，编辑，在 /head 标签前添加如下代码

<link href="https://cdn.bootcss.com/video.js/7.12.1/video-js.min.css" rel="stylesheet">

修改当前使用主题，找到页脚文件 footer.php，在 /body 标签前添加如下代码

<script src="https://cdn.bootcss.com/video.js/7.12.1/video.min.js"></script>

修改当前使用主题 functions.php 文件，在最下面添加如下代码

//videojs
/*
WordPress部署H5播放器Video.js
*/
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');

修改部分已经完成，接下来是在文章中引用的方法

如果要播放 m3u8格式的视频，只需要在文本模式下添加如下短代码，并将文字视频封面和视频地址改为你需要添加的信息

看图，以及图下面的代码

m3u8的使用插入代码

[videojs poster="视频封面" url="视频地址"]

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

[videojs poster="视频封面" mp4="视频地址"]

剩下的内容是修改的主题 functions.php 文件中的具体说明

在functions.php添加的代码中，我们主要看以下几个参数

'url' => '',
'webm' => '',
'ogv' => '',
'mp4' => '',
'width' => '',
'controls' => '',
'preload' => 'auto',
'autoplay' => 'false',
'loop' => 'false',
'muted' => '',
'poster' => '',
'class' => '',

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 *;

将*改为具体的域名，则是仅允许该域名引用，如只允许baidu.com引用

add_header Access-Control-Allow-Origin baidu.com;

作者：隔壁小色

链接：https://www.fanooo.com/archives/460

文章版权归作者所有，未经允许请勿转载。

THE END

wordpress 文章缩略图出错修复

<<上一篇

WordPress站点遇到了致命错误解决方法

下一篇>>