WordPress部署H5播放器Video.js，支持m3u8/MP4/WebM和Ogg格式

拼搏现实的明天。 2021-12-15 00:49 936阅读 0赞

**m3u8**格式的视频在网页上拥有更快的加载速度，但是HTML5的`video`标签只支持`MP4`/`WebM`和`Ogg`格式。最终，为WordPress部署了在Github拥有25106个Star的`Video.js`播放器。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NjUzMA_size_16_color_FFFFFF_t_70][]

## 1.全局引入 ##

### 1.1 CSS ###

打开wordpress主题目录，找到页首文件`header.php`，在`/head`标签前添加如下代码。

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

### 1.2 JS ###

找到页脚文件`footer.php`，在`/body`标签前添加如下代码。

1.  <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`文件，添加如下代码

1.  //videojs
2.  /\*
3.  WordPress部署H5播放器Video.js教程演示
4.  https://www.cccitu.com/4362.html
5.  \*/
6.  function videojs\_html5($atts) \{
7.  extract(shortcode\_atts(array(
8.  'url' => '',
9.  'webm' => '',
10. 'ogv' => '',
11. 'mp4' => '',
12. 'width' => '',
13. 'controls' => '',
14. 'preload' => 'auto',
15. 'autoplay' => 'false',
16. 'loop' => 'false',
17. 'muted' => '',
18. 'poster' => '',
19. 'class' => '',
20. ), $atts));
21. if(empty($url))\{
22. return \_\_('you need to specify the src of the video file', 'videojs-html5-player');
23. \}
24. //poster
25. $poster = 'poster="'.$poster.'"';
26.  
27. //src
28. $src = '<source src="'.$url.'" type="application/x-mpegURL" />';
29. if (!empty($webm)) \{
30. $webm = '<source src="'.$webm.'" type="video/webm" />';
31. $src = $src.$webm;
32. \}
33. if (!empty($ogv)) \{
34. $ogv = '<source src="'.$ogv.'" type="video/ogg" />';
35. $src = $src.$ogv;
36. \}
37. if (!empty($mp4)) \{
38. $mp4 = '<source src="'.$mp4.'" type="video/mp4" />';
39. $src = $src.$mp4;
40. \}
41. //controls
42. if($controls == "false") \{
43. $controls = "";
44. \}
45. else\{
46. $controls = " controls";
47. \}
48. //preload
49. if($preload == "metadata") \{
50. $preload = ' preload="metadata"';
51. \}
52. else if($preload == "none") \{
53. $preload = ' preload="none"';
54. \}
55. else\{
56. $preload = ' preload="auto"';
57. \}
58. //autoplay
59. if($autoplay == "true")\{
60. $autoplay = " autoplay";
61. \}
62. else\{
63. $autoplay = "";
64. \}
65. //loop
66. if($loop == "true")\{
67. $loop = " loop";
68. \}
69. else\{
70. $loop = "";
71. \}
72. //muted
73. if($muted == "true")\{
74. $muted = " muted";
75. \}
76. else\{
77. $muted = "";
78. \}
79. //custom style
80. $output = <<<EOT
81. <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='\{\}'>
82. $src
83. </video>
84. EOT;
85. return $output;
86. \}
87. add\_shortcode('videojs','videojs\_html5');
88.

## 3.使用说明 ##

### 3.1 添加方法 ###

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

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

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

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

### 3.2 参数说明 ###

1.  'url' => '',
2.  'webm' => '',
3.  'ogv' => '',
4.  'mp4' => '',
5.  'width' => '',
6.  'controls' => '',
7.  'preload' => 'auto',
8.  'autoplay' => 'false',
9.  'loop' => 'false',
10. 'muted' => '',
11. 'poster' => '',
12. 'class' => '',

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

`autoplay`：  
自动播放选项，true允许自动播放，false禁止自动播放，默认false，具体写法：

1.  'autoplay' => 'true',
2.  'autoplay' => 'false',

`controls`：  
控制条选择，true显示控制条，false禁止显示控制条，默认true，具体写法：

1.  'controls' => 'true',
2.  'controls' => 'false',

`loop`：  
循环播放选项， true视频播放结束后循环播放，false播放结束后禁止循环播放，具体写法：

1.  'loop' => 'true',
2.  'loop' => 'false',

`muted`：  
静音选项， true默认静音播放，false默认非静音播放，具体写法：

1.  'muted' => 'true',
2.  'muted' => 'false',

`preload`：  
预加载选项，auto自动判断，metadata加载视频长度，尺寸等元数据信息 ，none不预加载任何数据，直到用户点击开始播放才加载视频文件数据。

1.  'preload' => 'auto',
2.  'preload' => 'metadata',
3.  'preload' => 'none',

## 注意事项 ##

当使用m3u8格式视频时，需要注意跨域问题，如果视频网址和加载个视频网站的网址不一样，一定要在视频文件所在服务器或CDN上设置跨域。

允许所有网站引用

1.  add\_header Access-Control-Allow-Origin \*;

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

1.  add\_header Access-Control-Allow-Origin cccitu.com;

## 播放效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NjUzMA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NjUzMA_size_16_color_FFFFFF_t_70]: /images/20211214/64f0dfc4b9584085971c23eff834ef38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NjUzMA_size_16_color_FFFFFF_t_70 1]: /images/20211214/b4fb1f819a534889903310fd9653c8e7.png