流媒体技术学习笔记之(四)解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
2016-12-29 18:16
716 查看
源码地址:https://github.com/Tinywan/PHP_Experience
总结:
说明:
测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播播放器:VideoJs
直播:
1、阿里云直播,需要CDN设置HTTP头2、本地直播需要设置直播访问服务器的头部信息(本地为Nginx)
add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; add_header 'Access-Control-Allow-Headers' 'Range';
点播:
1、阿里云点播通过OSS存储2、本地点播,需要添加的头部信息:
add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; add_header 'Access-Control-Allow-Headers' 'Range';
flash播放器播放m3u8提示跨域错误
播放器跨域访问时需要添加策略文件,即在视频播放链接所在域名的根目录下,添加crossdomain.xml文件,其中添加播放器所在域名的权限,例如:http://test1.com/app/test.m3u8 需要添加 http://test1.com/crossdomain.xml
<?xml version="1.0" encoding="UTF-8"?> <cross-domain-policy> <allow-access-from domain="*"/> <allow-http-request-headers-from domain="*" headers="*" secure="false"/> </cross-domain-policy>
或者;
<?xml version="1.0" encoding="UTF-8"?> <cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd"> <allow-access-from domain="g.tinywan.com"/> </cross-domain-policy>
使用Flash播放器在线播放M3U8文件,需要在M3U8文件所在Bucket根目录下放置crossdomain.xml文件,文件中包含Flash播放器所在域名,否则无法播放。
使用媒体转码控制台预览您的M3U8文件,请在该M3U8文件所在Bucket根目录下放置如下内容的crossdomain.xml文件:
其中 g.tinywan.com 是我的Web播放器所在的域名,如您使用其他的Flash播放器,将播放器所在的域名添加一条新的allow-access-from domain记录即可。
想播放hls协议的就是m3u8文件,video.js原生不支持,官方有个插件videojs-contrib-hls 直接进入即可:
<script src="__PUBLIC__/lib/video-js/videojs-contrib-hls.min.js"></script>
今天纠结了一天,调试到最后发现原来是跨域的问题:
如果使用阿里云OSS存储的话(别的服务器设置头部可访问即可),在跨域设置中做如下设置即可:
关于跨域问题:https://help.aliyun.com/document_detail/31928.html
<!DOCTYPE html> <html> <head> <title>Video.js | HTML5 Video Player</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <link href="__PUBLIC__/lib/video-js/video-js.css" rel="stylesheet"> <script src="videojs-contrib-media-sources.min.js"></script> <script src="__PUBLIC__/lib/video-js/video.js"></script> <script src="__PUBLIC__/lib/video-js/videojs-contrib-hls.min.js"></script> </head> <body> <center> <video id="live-stream" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="1080" height="520" poster="__PUBLIC__/Common/static/images/videodemo.png" data-setup='{"example_option":true}'> <source src="http://amaitest.oss-cn-hangzhou.aliyuncs.com/record/live123/4001481793159.m3u8" type="application/x-mpegURL"> </video> </center> <script> var options = { width: 940, height: 360 } var player = videojs('live-stream', options); player.on(['loadstart', 'play', 'playing', 'firstplay', 'pause', 'ended', 'adplay', 'adplaying', 'adfirstplay', 'adpause', 'adended', 'contentplay', 'contentplaying', 'contentfirstplay', 'contentpause', 'contentended', 'contentupdate'], function(e) { console.warn('VIDEOJS player event: ', e.type); }); </script> </body> </html>
以上代码经过测试,可以正常播放m3u8文件。
官方文档当前不支持Internet Explorer <10。(The README states that there is currently no support for Internet Explorer < 10.Most of our enterprise clients are still running IE8, so I'm curious whether this will be on your roadmap once the codebase stabilizes, or whether you'll require users to upgrade?The two issues I noticed so far are lack of typed arrays and CORS support.)
特别提示:如果使用IE浏览器,建议升级IE浏览器到 IE 11 即可正常播放
阿里云视频直播:使用OBS推流RTMP 时候显示以上问题
解决办法:配置CDN,修改Http头即可以
http://tinywan.com/live/4001490605096.m3u8 播放正常
相关文章推荐
- 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
- 解决(播放此文件需要由格式标记 75 标识的音频编解码器)的问题
- 解决video.js 在 IOS播放的时候自动全屏的问题
- 利用flash中的Video类播放flv格式文件,每次播放十秒左右就无故停止解决方法
- 解决EasyDSS流媒体服务器videojs flash播放RTMP、HLS提示错误的问题
- [HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls
- Ubuntu7.04使用totem-xine,安装libxine1-ffmpeg后,rm文件播放无声问题的解决办法
- 帮助解决网页和JS文件中的中文编码问题的小工具
- 使用Apache Axis部署 Web服务时的常见问题及其解决方法(IBM 官方文档)
- 解决http下载部分文件格式(如*.pdb)不能正常下载的问题
- 关于PhotoShop中保存CMYK格式TIFF文件在GDI+错误地显示颜色的问题解决方法
- Ubuntu7.04使用totem-xine,安装libxine1-ffmpeg后,rm文件播放无声问题的解决办法
- 解决暴风影音不能播放AVI文件的问题
- 一起avi文件播放时没有图像问题的解决(tscc.exe)
- Ubuntu7.04使用totem-xine,安装libxine1-ffmpeg后,rm文件播放无声问题的解决办法
- Ubuntu7.04使用totem-xine,安装libxine1-ffmpeg后,rm文件播放无声问题的解决办法
- Ubuntu7.04使用totem-xine,安装libxine1-ffmpeg后,rm文件播放无声问题的解决办法
- 关于.JS文件保存编码格式的问题-兼容各种语言版本
- c#读写ANSI格式文件,解决中乱码问题最简单的写法
- 解决播客程序不能播放Flv文件的问题