hls协议视频（.m3u8）在浏览器播放

 

目录

 

前言

一、HLS协议是什么？

二、TCplayer使用步骤

1.引入库

2.在HTML中放置容器

3.对接视频播放

总结

---

 

---

前言

当前主要的直播技术有三种，分别是RTMP、HLS、HTTP-FLV，其中RTMP和HTTP-FLV是HTTP长连接，每个时刻的数据收到后会立刻转发，延时基本在1-3s之间，但这两种技术都需要页面端flash技术的支持，随着chrome浏览器即将停止对flash的支持，这两种方案变得不那么友好，那么就只能使用HLS技术来实现，当然，移动端和Safari是可以直接使用HTML5的viedo标签直接播放，那么其他浏览器需要做兼容，像海康、大华等厂家的摄像头也可以采用此种方式进行播放。

---

 

一、HLS协议是什么？

HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。

目前移动端和Safari可以用HTML5的viedo标签直接播放，其他浏览器需要做兼容，现在有很多的基于hls的兼容方案，包括video.js的videojs/videojs-contrib-hls、hls.js、Chimeejs/chimee等。当然，我们也可以使用腾讯的tcplayer等封装更加彻底，使用简单的方案。

二、TCplayer使用步骤

1.引入库

<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>;

2.在HTML中放置容器

<div id="id_video" style="width:100%; height:auto;"></div>

3.对接视频播放

var player = new TcPlayer('id_video', {
"m3u8": "http://test.net/test.m3u8", //请替换成实际可用的播放地址
"autoplay" : true,   //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
});

封面样式、清晰度支持等其他配置可到官网查看https://cloud.tencent.com/document/product/881/20207

 

---

总结

以上就是在网页端播放hls协议视频的步骤了。