videojs--跨浏览器的HTML视频播放器（可自定义款式）

2024年5月23日 355次阅读 来源: zone

官网

写在前面，为何挑选这个播放器，由于有文档，支撑增加插件，很轻易自定义款式，

比较活泼，github有种种bug解决方案等

不过没想到有那么多坑

最简朴的静态页面使用要领

<head>
  <link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type='video/mp4'>
    <source src="MY_VIDEO.webm" type='video/webm'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
</body>

动态插进去HTML时初始化要领

videojs("example_video_id", {}, function(){
  // Player (this) is initialized and ready.
});

或许

videojs(document.getElementById('example_video_id'), {}, function() {
  // This is functionally the same as the previous example.
});

或许

videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
  // You can grab an element by class if you'd like, just make sure
  // if it's an array that you pick one (here we chose the first).
});

更多细致使用要领请检察官方文档

常见问题汇总

1，pc端一般，IOS上面不起作用

data-setup='{"customControlsOnMobile": true}'//版本4

data-setup='{"nativeControlsForTouch": false}' //版本5

或许写在
videojs(document.getElementById('example_video_id'), {"nativeControlsForTouch": false}, function() {
  // This is functionally the same as the previous example.
});

2，别的毛病

先挪用官方的视频做测试，http://vjs.zencdn.net/v/oceans.mp4，

假如这个一般，别的的花样非常，请参考：

[非常1][2]  http://stackoverflow.com/questions/16697473/videojs-4-native-controls-now-default-on-mobile

[非常2][3] http://stackoverflow.com/questions/26182101/videojs-hls-not-working

3,只是在Iphone上不起作用（官网示例 5.8）参考：github issue

if (browser.TOUCH_ENABLED && options.nativeControlsForTouch === true || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) {
                this.setControls(true);
            }
            
 //替换为
if ((browser.TOUCH_ENABLED || browser.IS_IPHONE || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) && options.nativeControlsForTouch === true){
                this.setControls(true);
            }

4,默许不全屏播放

前台：<video webkit-playsinline ></video>

IOS 参考：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-SW30
    原文作者：zone
    原文地址: https://segmentfault.com/a/1190000006151693
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞