PC浏览器播放HLS协议的视频

9,592 阅读3分钟

以下是自己对 PC浏览器播放HLS协议视频 的解决方法的一个搜集总结。

背景

项目要求PC端浏览器播放HLS直播视频,并且不能使用Flash插件播放器[PS:听说给政府人员使用的,不允许浏览器下载插件啥的]

解决方法

videojs

  • 功能
  • 支持PC端播放m3u8格式的视频

  • 注意点
  • 可能会出现 跨域 问题,需要服务端的配合,让视频允许跨域

  • 代码展示
  • //引入的文件
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
    
    //html部分
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
      data-setup='{}'>
        <source src="http://www.tony.com/hls/test.m3u8" type="application/x-mpegURL">
     </video>
    
    //js部分 --这部分别忽略了[我自己没写,调的快崩溃]
    //var player=videojs('#my_video_1');
    //player.play();
    
    //视频播放
    var myPlayer = videojs('my_video_1<%=i%>',{
        bigPlayButton : true,
        textTrackDisplay : true,
        posterImage: true,
        errorDisplay : true,
        controlBar : true
    },function(){
        //ready 加载
    //                        console.log(this)
    	var _that = this;
        this.on('loadedmetadata',function(){
        })
        this.on('ended',function(){
        })
        this.on('firstplay',function(){
        })
        this.on('loadstart',function(){
            //开始加载
        })
        this.on('loadeddata',function(){
        })
        this.on('seeking',function(){
            //正在去拿视频流的路上
        })
        this.on('seeked',function(){
            //已经拿到视频流,可以播放
        })
        this.on('waiting',function(){
        })
        this.on('pause',function(){
        })
        this.on('play',function(){
        })
    });
    myPlayer.play(); //视频播放
    

hlsJs

  • 代码展示
  • //文件引入
    <script type="text/javascript" src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
    
    //html部分
    <div class="video" id="HLSPlayer" >
    
    //js部分
    var video = document.getElementById('video');
    var hls = new Hls();
    var hlsUrl = 'http://域名/hls/123.m3u8';
    hls.loadSource(hlsUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function(){
        video.play();
    });
    
    

TcPlayer 腾讯播放器

  • 知识点
  • 点播:视频源是一个服务器上的文件,有进度条

    直播:实时直播,无进度条

  • 代码展示
  • //引入文件
    <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>
    
    // html部分
    <div id="id_test_video" style="width:400px; height:300px;"></div>
    
    //js部分
    var player =  new TcPlayer('id_test_video', {
       "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
        //"flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个flv的播放地址,用于PC平台的播放 请替换成实际可用的播放地址
        "autoplay" : true,      //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
        "coverpic" : "http://img4.imgtn.bdimg.com/it/u=4038339613,2609508265&fm=200&gp=0.jpg",
        "width" :  '480',//视频的显示宽度,请尽量使用视频分辨率宽度
        "height" : '320'//视频的显示高度,请尽量使用视频分辨率高度
    });
    
    

    注意:存在跨域问题,并且不能在本地测试,详情请看以下 TcPlayer 腾讯播放器 的链接

知识点

  • 知识点1:
  •     PC 端需要通过其他手段(videojs-contrib-hls)来解码 .m3u8 格式的视频, 才能够通过 video 标签或者 Flash 来播放
  • 知识点2:
  •     无 Flash 时代,让直播拥抱 H5(完整篇)    [可以了解一下这篇文章,多学无害嘛]
  • 知识点3:
  •     RTMP: 浏览器中只能使用Flash实现播放器,无法支持移动端WEB播放
  • 知识点4:
  •     其他PC浏览器播放技术:
    1、sewise-player    [Flash和HTML5播放器]Flash播放m3u8文件
    2、mediaelement    [Flash和Sliverlight播放器] 
    3、Jwplayer [Flash和HTML5播放器]  网页媒体播放器 
    

遇到的问题

  • 跨域问题
  • 解决方法:服务端增加支持跨域请求

参考链接

videojs

> 项目中使用 videojs 实现PC端浏览器播放HLS视频

TcPlayer 腾讯播放器

hlsjs

源码

demo地址