前言

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

hls协议视频（.m3u8）在浏览器播放相关推荐

m3u8的浏览器播放器
前几天花了点时间研究了下怎么在浏览器中播放m3u8的视频地址,最后终于找到了两个开源的东西可以正常播放,稍稍整理下方便后来人. m3u8是什么就不介绍了,现在所有视频网站基本都是通过m3u8的方式来播 ...
HTML页面加载播放RTMP协议流和HLS协议流直播视频
主要内容让rtmp或hls的协议流直播视频能在html页面正常显示(这里也是综合参考了网上其余的资料,最终放出下面这些实测可用的方案). 首先是HLS协议流, 这种是播放m3u8格式的视频. 解决方案 ...
HLS协议深入分析——时间线介绍（二）
在上一篇文章中,我们重点介绍了HLS协议中M3U8文件里面和时间相关的一些字段,以及这些字段在不同平台MAC,Android上的一些应用,本文介绍一下HLS中TS文件里面和时间相关的字段. 一．TS介 ...
php安卓直播抓取,hls,android_安卓大部分浏览器播放HLS协议直播流会从头开始，hls,android,ffmpeg,m3u8 - phpStudy...
安卓大部分浏览器播放HLS协议直播流会从头开始遇到的问题 HLS直播流在iOS系统中表现正常, 但在安卓使用大部分浏览器(UC浏览器除外)播放ffmpeg生成的HLS直播流都会发生从头播放的问题, ...
使用HLS协议连接nginx实现近实时流方式播放视频
文章目录 1. 流媒体 1.1 流式传输 1.1.2 顺序流式传输 1.1.3 实时流式传输 2. 点播 2.1 点播方案 2.2 什么是`HLS` 3. 视频编码 3.1 视频编码格式 3.2 `F ...
视频相关的hls协议、VLC播放器、m3u文件的播放
前言今天在观看视频的过程中,fiddler抓包看了一下请求,发现请求中无cookie相关的参数,心中窃喜,我是不是可以通过请求来访问这个视频呢? 于是复制请求地址,在浏览器打开,what? 1.不能 ...
android hls检测,安卓大部分浏览器播放HLS协议直播流会从头开始
遇到的问题 HLS直播流在iOS系统中表现正常, 但在安卓使用大部分浏览器(UC浏览器除外)播放ffmpeg生成的HLS直播流都会发生从头播放的问题, 即不管何时播放直播流,都会从直播开头的内容开始播 ...
小程序实现RTMP/HLS协议直播监控视频实时播放实现步骤
小程序实现监控视频实时播放实现步骤简述:RTMP协议直播视频,可使用小程序live-player组件实现视频播放,暂只针对国内主体特定类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发 ...
iOS 边学边记 HLS协议 m3u8 ts详解
1.HLS综述谈HLS 就不得不谈苹果,谈苹果就不得不提乔帮主.HLS就是"HTTP Live Streaming"的缩写,它诞生自2009年,QuickTime和iPhone3 ...
html播放rtsp视频,浏览器播放rtsp视频流解决方案
最近项目中需要实时播放摄像头rtsp视频流,于是就专门做了些研究.而浏览器不能直接播放,只有通过插件或者转码来实现这个需求. 要实现这个目的,可以采用的方案非常得多,有商业的也有开源的,这里主要列举一 ...

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

前言