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

作者: admin 分类: wordpress 发布时间: 2019-11-10 18:19

转载于:https://www.cccitu.com/4362.html

 

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

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.jsvideojs-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} datasetup=‘{}’>
  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/oggwebm格式,就将代码中的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 AccessControlAllowOrigin *;

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

  1. add_header AccessControlAllowOrigin cccitu.com;

播放效果

Video Player is loading.

Loaded: 0%
Remaining Time -:-

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注