PC浏览器播放m3u8

PC浏览器播放m3u8

前一阵 解决了HLS 的Android和 IOS支持问题。 但PC端浏览器并没有解决，在网上查阅了相关资料后，发现videojs 配合videojs-contrib-hls.js 可以实现调用flash播放器播放hls。

浏览器实测支持情况：

前提：pc已安装flash

浏览器对hls支持情况 ：

• Chorme ：支持
• firefox：支持
• safiar： 支持
• ie： 不支持

1.html代码

<video id="example-video" width=600 height=300 class="video-js vjs-default-skin" controls>
    <source src="http://172.28.28.4:4017/hls/SHY3U1JCLNVBMUND111A/tslive.m3u8" type="application/x-mpegURL">
</video>
<script src="/javascripts/video-js/video.min.js"></script>
<script src="/javascripts/video-js/videojs-contrib-hls.js"></script>
<script>
    var player=videojs('#example-video');
    player.play();
</script>

2 使用的video.js和videojs-contrib-hls.js版本

video.js：Video.js 6.4.0 http://videojs.com/
git地址：https://github.com/videojs/video.js.git
videojs-contrib-hls.js：5.12.2
git地址：https://github.com/videojs/videojs-contrib-hls

3.使用中遇到的问题

3.1 使用nginx服务器时，会遇到跨域问题导致无法播放。使用CORS解决. ###

(1)在nginx conf中该条location下 添加

        location /hls/XXXX {
            add_header 'Access-Control-Allow-Origin' 'http://XXX.XX.XX.XXX';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET';

            types{
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            alias ./hls/XXX;
            add_header Cache-Control no-cache;
        }

(2)在使用阿里云OSS上的码流时同样要解决跨域，可以通过控制台配置跨域规则解决。

3.2 videojs-contrib-hls.js 对hls 支持并不是完美的。

一些可以在苹果和安卓上播放端的码流，我们应该以苹果为标准。然后videojs-contrib-hls.js 并不能解析

比如：
（1） 如果TS中有NIT 字节，现在的版本是无法解除pmt的。导致不能播放。通过下层封装代码去掉NIT 部分解决
（2）PC端有视频但没有音频，是因为videojs-contrib-hls.js 对AAC解析也不完美，在苹果上能解的AAC，在videojs-contrib-hls.js 解析中出现了标志位长度和实际累计长度不一致的情况导致触发异常处理不能播放声音。通过修改videojs-contrib-hls.js AAC解算源码部分解决。

3.3 附上实测通过的代码pug版

extends ../layout
block head
    link(rel='stylesheet',href='/stylesheets/video-js/video-js.css')
    script(src='/javascripts/jquery/jquery.min.js' type='text/javascript')
    script(src='/javascripts/bootstrap.min.js' type='text/javascript')
    script(src='/javascripts/video-js/video.min.js' type='text/javascript')
    script(src='/javascripts/video-js/videojs-contrib-hls.js' type='text/javascript') 

block content
    .container
    span 播放测试#{description}
        .row <strong>jw stream</strong>
            <video id="example-video" width=960 height=540 class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto">
                <source src="http://xxx.xx.xx.x:4017/hls/xxxxxxxx/tslive.m3u8" type="application/x-mpegURL">
            </video>
            script.
                console.info("i want to konw happen");
                var myPlayer=videojs('#example-video'); //自动播放
                videojs("example-video").ready(function(){
                    var myPlayer = this;
                    myPlayer.play();

                });