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

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

背景

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

解决方法

videojs

• 功能

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

注意点

可能会出现 跨域 问题，需要服务端的配合，让视频允许跨域

代码展示

//引入的文件
"https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">



//html部分


//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

• 代码展示

//文件引入


//html部分
"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 腾讯播放器

• 知识点

点播：视频源是一个服务器上的文件，有进度条

直播：实时直播，无进度条

代码展示

//引入文件


// html部分
"id_test_video" style="width:400px; height:300px;">

//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视频

• videoJS使用例子

• PC浏览器播放m3u8 --videoJs

• 前端video标签播放m3u8格式视频

• 前端如何播放m3u8格式的视频

• PC浏览器播放m3u8

• HLS流无法在web端播放解决方案（video.js）

TcPlayer 腾讯播放器

• Web播放器 TcPlayer——腾讯直播sdk的网页播放器

hlsjs

• hlsJs

• 纯HLS（m3u8）跨平台html5视频播放插件

• html5

源码

demo地址