Videojs HLS m3u8文件无法在iOS设备和Safari浏览器中播放

时间:2017-12-04 05:24:28

标签: javascript ios safari video.js hls

我可以在PC和Android设备上播放m3u8文件,但我无法在iOS移动设备和Safari浏览器中播放这些文件, 我将overrideNative禁用为' true'对于Android设备,所以它在android中工作。 但是我们不应该禁用iOS和Safari的原生,因为iOS Safari使用原生播放器, 所以我为iOS设置了过度假。但它不起作用。 我正在关注新的videojs版本。

videojs:6.4.0

videojs contrib hls:5.12.2

videojs flash:2.0.1

示例

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>videojs-contrib-hls</title>

    <link href="https://unpkg.com/video.js@6.4.0/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js@6.4.0/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-flash@2.0.1/dist/videojs-flash.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls@5.12.2/dist/videojs-contrib-hls.js"></script>

    </head>
    <body>
      <h1>Video.js Example Embed</h1>
      <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="600" height="268" 
       data-setup='{}'>
        <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
      </video>
      <script>
        let videojshls= videojs('my_video_1', {  html5: {  
        nativeAudioTracks: false,
        nativeVideoTracks: false,
        hls: {
          debug: true,
          overrideNative: false
        }
       }});
      </script>
    </body>
    </html>

example jsfiddle

请任何人帮助我。谢谢

1 个答案:

答案 0 :(得分:3)

试试这个http://jsfiddle.net/fxfktztx/1/。它对我有用。

var overrideNative = false;

var player = videojs('example-video', {
  html5: {
    hls: {
      overrideNative: overrideNative
    },
    nativeVideoTracks: !overrideNative,
    nativeAudioTracks: !overrideNative,
    nativeTextTracks: !overrideNative
  }
});
player.play();

据我所知,videojs options应该在播放器初始化时传递,或者使用data-setup属性,或者直接进入构造函数,就像我在上面的示例中所做的那样。