前言

当前主要的直播技术有三种,分别是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-hlshls.jsChimeejs/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协议视频的步骤了。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐