PC浏览器播放m3u8
PC浏览器播放m3u8
前一阵 解决了HLS 的Android和 IOS支持问题。 但PC端浏览器并没有解决,在网上查阅了相关资料后,发现videojs 配合videojs-contrib-hls.js 可以实现调用flash播放器播放hls。
浏览器实测支持情况:
前提:pc已安装flash
浏览器对hls支持情况 :
- Chorme :支持
- firefox:支持
- safiar: 支持
- ie: 不支持
1.html代码
<video id="example-video" width=600 height=300 class="video-js vjs-default-skin" controls><source src="http://172.28.28.4:4017/hls/SHY3U1JCLNVBMUND111A/tslive.m3u8" type="application/x-mpegURL">
</video>
<script src="/javascripts/video-js/video.min.js"></script>
<script src="/javascripts/video-js/videojs-contrib-hls.js"></script>
<script>var player=videojs('#example-video');player.play();
</script>
2 使用的video.js和videojs-contrib-hls.js版本
video.js:Video.js 6.4.0 http://videojs.com/
git地址:https://github.com/videojs/video.js.git
videojs-contrib-hls.js:5.12.2
git地址:https://github.com/videojs/videojs-contrib-hls
3.使用中遇到的问题
3.1 使用nginx服务器时,会遇到跨域问题导致无法播放。使用CORS解决. ###
(1)在nginx conf中该条location下 添加
location /hls/XXXX {add_header 'Access-Control-Allow-Origin' 'http://XXX.XX.XX.XXX';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET';types{application/vnd.apple.mpegurl m3u8;video/mp2t ts;}alias ./hls/XXX;add_header Cache-Control no-cache;}
(2)在使用阿里云OSS上的码流时同样要解决跨域,可以通过控制台配置跨域规则解决。
3.2 videojs-contrib-hls.js 对hls 支持并不是完美的。
一些可以在苹果和安卓上播放端的码流,我们应该以苹果为标准。然后videojs-contrib-hls.js 并不能解析
比如:
(1) 如果TS中有NIT 字节,现在的版本是无法解除pmt的。导致不能播放。通过下层封装代码去掉NIT 部分解决
(2)PC端有视频但没有音频,是因为videojs-contrib-hls.js 对AAC解析也不完美,在苹果上能解的AAC,在videojs-contrib-hls.js 解析中出现了标志位长度和实际累计长度不一致的情况导致触发异常处理不能播放声音。通过修改videojs-contrib-hls.js AAC解算源码部分解决。
3.3 附上实测通过的代码pug版
extends ../layout
block headlink(rel='stylesheet',href='/stylesheets/video-js/video-js.css')script(src='/javascripts/jquery/jquery.min.js' type='text/javascript')script(src='/javascripts/bootstrap.min.js' type='text/javascript')script(src='/javascripts/video-js/video.min.js' type='text/javascript')script(src='/javascripts/video-js/videojs-contrib-hls.js' type='text/javascript') block content.containerspan 播放测试#{description}.row <strong>jw stream</strong><video id="example-video" width=960 height=540 class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"><source src="http://xxx.xx.xx.x:4017/hls/xxxxxxxx/tslive.m3u8" type="application/x-mpegURL"></video>script.console.info("i want to konw happen");var myPlayer=videojs('#example-video'); //自动播放videojs("example-video").ready(function(){var myPlayer = this;myPlayer.play();});
PC浏览器播放m3u8相关推荐
- php安卓直播抓取,hls,android_安卓大部分浏览器播放HLS协议直播流会从头开始,hls,android,ffmpeg,m3u8 - phpStudy...
安卓大部分浏览器播放HLS协议直播流会从头开始 遇到的问题 HLS直播流在iOS系统中表现正常, 但在安卓使用大部分浏览器(UC浏览器除外)播放ffmpeg生成的HLS直播流都会发生从头播放的问题, ...
- m3u8的浏览器播放器
前几天花了点时间研究了下怎么在浏览器中播放m3u8的视频地址,最后终于找到了两个开源的东西可以正常播放,稍稍整理下方便后来人. m3u8是什么就不介绍了,现在所有视频网站基本都是通过m3u8的方式来播 ...
- video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题
video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题 一.问题描述: 在h5做根据视频源直播功能时,在浏览器能打开视频,但是在部分安卓机和苹果机在微信浏览器打开会出现黑屏的状 ...
- 浏览器使用video播放m3u8类的直播流媒体
关于m3u8文件格式 描述 m3u8 是一种基于 HTTP Live Streaming 视频流媒体格式.m3u8文件本身是一个纯文本文件,用于存放整个视频的基本信息和分片(Segment)组成. 由 ...
- 摄像头网页服务器,网络摄像头实现直播的方法 在网页浏览器播放等于可以在网页传播...
网络摄像头实现直播的方法,可以在网页浏览器播放,可以发送给你的朋友,可以放到你的官网去增加一条播放链接,可以在网页文章里增加一条播放链接.怎么实现呢? 需要的准备如下: 1.网络摄像头一个 2.电脑一 ...
- Android,播放m3u8视频和下载m3u8的视频
因最近项目需要,研究了一个礼拜的m3u8.格式为m3u8的视频,其实是由多个.ts文件组成在一起播放的.下面有些资料是参考了网上的,总体概括下实现思路: 1.根据后台给出的m3u8的地址,实现播放,核 ...
- video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过 编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
- Unity WebGl播放m3u8在线视频(监控,直播)解决方案
WebGL版本播放视频是很大的一个坑,教程也不多.以下为工作中使用的两个方法. 一.使用AVProVideo插件 新版AVProVideo插件支持WebGl播放 倒入插件,我用的版本是1.9.4,文章 ...
- h5播放m3u8格式视频流
h5播m3u8格式视频流 在微信公众号的某个页面接入监控视频(.m3u8格式的),需求相对简单,能够播放就可以,之前没有处理过mp4格式外的视频文件,记录一下: ###1.使用video.js来播放 ...
- java后台 移动端 h5 播放m3u8
1.知识点 m3u8 m3u8 是一种基于 HTTP Live Streaming 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前 由 Apple.inc 率先提出的 ...
最新文章
- python皮同_Python OpenCV 图像的双线性插值算法,全网最细致的算法说明_橡皮擦,一个逗趣的互联网高级网虫-CSDN博客...
- 简述python中怎样导入模块_Python中导入模块的两种模式,import
- 单元测试试图告诉我们关于 Activity 的什么事情:第二部分
- [Java拾遗四]JavaWeb基础之Servlet_RequestResponse
- UVa12704 - Little Masters
- 使用ocr的自动备份还原ocr
- 开榨油店的失败教训_想开水果店没有经验?线下开水果店经营心得分享,或许你用得上...
- 程序员新人怎样在复杂代码中找 bug?
- TreeView 操作应用
- 51nod 范德蒙矩阵
- python笔记(一) 数据类型 函数
- 基于W5500的嵌入式SNMP代理端实现
- pytorch教程 聊天机器人(详细注释attentionrnn输入输出shape等知识点...
- java catch 空指针异常_在Java中避免空指针异常(Null Pointer Exception)
- 计算机科学基础大熊猫,大学实验室长什么样? 四川南充300多名小朋友走进西华师大感受生命与科学...
- 做游戏与web的区别 - 服务器篇【1】
- 真正厉害的人,都在延迟满足
- 流媒体、直播解决方案及趋势
- 【数据结构】kd树实现,范围查询,邻近查询笔记【1】2d树的构造
- linux中sh脚本的写法