流媒体技术学习笔记之(四)解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

本文涉及的产品
对象存储 OSS,20GB 3个月
简介: 源码地址:https://github.com/Tinywan/PHP_Experience总结:说明:  测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播  播放器:VideoJs直播:1、阿里云直播,需要CDN设置HTTP头  2、本地直播需要设置直播...
+关注继续查看

源码地址: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 播放正常

 

目录
相关文章
|
4月前
|
缓存
实战--实现任意格式文件的音视频播放器
实战--实现任意格式文件的音视频播放器
22 0
|
5月前
uniapp视频、音频上传的方法
uniapp视频、音频上传的方法
|
10月前
|
JavaScript 前端开发 开发者
JS逆向 -- 开发者工具介绍
JS逆向 -- 开发者工具介绍
154 0
JS逆向 -- 开发者工具介绍
|
11月前
|
Web App开发 iOS开发
WKWebView接入PDF.js过程记录处理总结
最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题,后来查找很多解决方案,最后决定用PDF.js的方式来实现
144 0
|
11月前
|
JavaScript 前端开发 视频直播
利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播
众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云的有偿直播服务,服务包括软硬件设备,摄像机,编码器,流媒体服务器等。但是其高昂的费用以及较高的准入门槛让许多个人和小型企业望而却步,本文要讲解的是如何使用nginx-rtmp搭建直播服务器,配合FFmpeg推流,在网页端vue.js作为载体利用video.js作为流播放器,打造一套可用的在线视频直播方案。
利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播
|
12月前
|
数据安全/隐私保护
亲测可行!!!将下载好的优酷文件kux格式转为MP4格式
亲测可行!!!将下载好的优酷文件kux格式转为MP4格式
亲测可行!!!将下载好的优酷文件kux格式转为MP4格式
|
数据采集 编解码 JavaScript
Python爬虫:js的btoa和atob和pythonBase64编码解码比对分析
Python爬虫:js的btoa和atob和pythonBase64编码解码比对分析
772 0
Python爬虫:js的btoa和atob和pythonBase64编码解码比对分析
|
Java
富文本编辑器Ueditor实战(四)-video集成
文章介绍了如何在springboot环境中集成ueditor,以及如何修改配置支持在富文本编辑器中直接预览视频资源。
257 0
富文本编辑器Ueditor实战(四)-video集成
|
移动开发 前端开发 JavaScript
前端实现PDF文件下载的两种方式
前端实现PDF文件下载的两种方式
1911 0
前端实现PDF文件下载的两种方式
相关产品
云迁移中心
推荐文章
更多