PC浏览器播放HLS协议的视频
以下是自己对 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视频
videoJS使用例子
PC浏览器播放m3u8 --videoJs
前端video标签播放m3u8格式视频
前端如何播放m3u8格式的视频
PC浏览器播放m3u8
HLS流无法在web端播放解决方案(video.js)
TcPlayer 腾讯播放器
- Web播放器 TcPlayer——腾讯直播sdk的网页播放器
hlsjs
hlsJs
纯HLS(m3u8)跨平台html5视频播放插件
html5 <video>解析m3u8播放视频
源码
demo地址
PC浏览器播放HLS协议的视频相关推荐
- php安卓直播抓取,hls,android_安卓大部分浏览器播放HLS协议直播流会从头开始,hls,android,ffmpeg,m3u8 - phpStudy...
安卓大部分浏览器播放HLS协议直播流会从头开始 遇到的问题 HLS直播流在iOS系统中表现正常, 但在安卓使用大部分浏览器(UC浏览器除外)播放ffmpeg生成的HLS直播流都会发生从头播放的问题, ...
- android hls检测,安卓大部分浏览器播放HLS协议直播流会从头开始
遇到的问题 HLS直播流在iOS系统中表现正常, 但在安卓使用大部分浏览器(UC浏览器除外)播放ffmpeg生成的HLS直播流都会发生从头播放的问题, 即不管何时播放直播流,都会从直播开头的内容开始播 ...
- 网页全终端安防视频流媒体播放器EasyPlayer.js如何实现在web浏览器播放H.265编码视频?
目前安防监控行业,基本所有的摄像头都支持H264编码,但是已经有部分摄像头开始支持H265,并且支持H265的摄像机已经越来越多.H265相比H264有着很多优势,压缩更高,网络传输消耗的带宽更小,相 ...
- EasyNVR是怎么做到Web浏览器播放RTSP摄像机直播视频延时控制在一秒内的
背景说明 由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合也是大势所趋.传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都是都需要OCX Web插件进行直播.对 ...
- IPTV机顶盒使用MediaPlayer 播放rtsp协议的视频
废话不多说直接上代码.如下: <%@ page contentType="text/html; charset=utf-8" language="java" ...
- 小程序实现RTMP/HLS协议直播监控视频实时播放实现步骤
小程序实现监控视频实时播放实现步骤 简述:RTMP协议直播视频,可使用小程序live-player组件实现视频播放,暂只针对国内主体特定类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发 ...
- 浏览器播放RTSP摄像头视频
一.项目需求,需要在chrome浏览器中播放rtsp协议的摄像头视频流 二.思路: 1.chrome已经不支持插件了,所以排除一切插件的思路: 2.浏览器目前停留在支持rtmp协议,hls协议流视频阶 ...
- 简单使用exoplayer播放HLS
使用exoplayer 简单的播放HLS协议 代码如下: DefaultBandwidthMeter BANDWIDTH_METER = new DefaultBandwidthMeter();Str ...
- Google Chrome离线安装Native HLS Playback插件播放HLS
在Google Chrome浏览器中离线安装Native HLS Playback插件的方法如下: 1.下载Native HLS Playback插件-离线包.rar,下载连接: 链接:https:/ ...
- 使用HLS协议连接nginx实现近实时流方式播放视频
文章目录 1. 流媒体 1.1 流式传输 1.1.2 顺序流式传输 1.1.3 实时流式传输 2. 点播 2.1 点播方案 2.2 什么是`HLS` 3. 视频编码 3.1 视频编码格式 3.2 `F ...
最新文章
- 树与森林的存储、遍历和树与森林的转换
- Windows7IIS7.5部署Discuz全攻略
- linux定时监控端口并重新启动shell脚本命令
- 记一次服务器执行MySQL耗时问题
- 基于Java的汽车租赁系统
- 极点五笔linux,Ubuntu 11.10安装极点五笔
- 怎么把EXCEL内的十六进制数进行两位两位倒序排列
- 概念数据模型、逻辑数据模型、物理数据模型详解
- 互联网晚报 | 10月21日 星期四 | 微信支付上线品牌视频号;快手短剧日活用户达2.3亿;《长津湖》票房升至中国影史第三...
- bootstrap框架中的分割线
- 洛谷 P2466 Sue的小球 解题报告
- java deflate_[Java]关于Deflate、GZip格式网页的解压
- 饿了么官宣合作抖音后,美团的失意是什么?
- 微信网页授权登入--laravel组件 laravel-wechat调用
- Selenium测试报错 Other element would receive the click 问题
- 计算机网络-网络应用(上)
- 2021-11-15 基于音乐商店NetMusicShop的复杂查询(二)
- CSS基础班笔记(二)
- [BZOJ3054] Rainbow的信号(考虑位运算 + DP?)
- Go Readers读取数据流