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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: 源码地址: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

"1.0" encoding="UTF-8"?>

    from domain="*"/>
    from domain="*" headers="*" secure="false"/>

或者;

"1.0" encoding="UTF-8"?>
"http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd">
from domain="g.tinywan.com"/>

 

使用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存储的话(别的服务器设置头部可访问即可),在跨域设置中做如下设置即可:

 

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 播放正常

 

目录
相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
71 1
|
4月前
|
JavaScript 前端开发 API
探索后端技术:Node.js的优势和实际应用
【10月更文挑战第6天】 在当今数字化时代,后端开发是任何成功软件应用的关键组成部分。本文将深入探讨一种流行的后端技术——Node.js,通过分析其核心优势和实际应用案例,揭示其在现代软件开发中的重要性和潜力。
256 2
|
4月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
4月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
62 0
|
1月前
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
|
3月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
86 5
|
3月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
64 1
|
3月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
59 1
|
4月前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
46 3

热门文章

最新文章