源码地址：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也不行的原因解决了的更多相关文章

  1. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  2. html页面引用video.js播放m3u8格式视频

    //head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...

  3. video.js支持m3u8格式直播

    为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...

  4. 高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui> 本文围绕着实现EasyDSS高性能流 ...

  5. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  6. 流媒体技术学习笔记之（十八）互联网草案HTTP直播流2017年5月

    原文地址:https://tools.ietf.org/html/draft-pantos-http-live-streaming-23 1.HTTP直播流介绍 HTTP实时流媒体提供了一个可靠的,成 ...

  7. 跨域学习笔记3--web.config设置之system.webServer 详细介绍，为网站设置默认文档

    自己并不懂,在此先记录下来,留待以后学习... 如何:为 IIS 7.0 配置 <system.webServer> 节2008-06-14 22:26http://technet.mic ...

  8. 移动端播放直播流（video.js 播放 m3u8 流）

    流媒体服务器: wowza 流媒体格式: m3u8 播放端:移动端网页(Android.IOS) 播放工具: video.js 代码如下: <!DOCTYPE html> <html ...

  9. React 基于antd+video.js实现m3u8格式视频播放及实时切换

    文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用  安装依赖 npm ...

随机推荐

  1. 【技巧】如何清空SQLServer的日志文件

    一.应用场景 在一次项目实施的过程中,发现一个小问题,在开发环境中备份下来的数据库大约15G,压缩后更小一些,但是在另外一台设备上部署的时候,发现总是提示空间不足.通过查询发现数据库的日志文件比较大, ...

  2. 软件测试_APP测试_兼容性测试

    APP的兼容测试主要就是测试APP的安装.启动.运行.卸载测试,以及安装时间 .启动时间.CPU占用.内存占用.流量耗用.电量耗用等性能上的测试. 兼容性测试点: 一.内部兼容性: 1.与本地和其他主 ...

  3. AssetBundleMaster

    AssetBundleMaster is an integrated solution for build AssetBundle and load assets from AssetBundles ...

  4. 阿里云容器服务区块链解决方案全新升级 支持Hyperledger Fabric v1.1

    摘要: 全球开源区块链领域影响最为广泛的Hyperledger Fabric日前宣布了1.1版本的正式发布,带来了一系列丰富的新功能以及在安全性.性能与扩展性等方面的显著提升.阿里云容器服务区块链解决 ...

  5. PAT甲题题解-1002. A+B for Polynomials (25)-多项式相加

    注意两点:1.系数也有可能加起来为负!!!一开始我if里面判断为>0导致有样例没过...2.如果最后所有指数的系数都为0,输出一个0即可,原本以为是输出 1 0 0.0... #include ...

  6. Notes of Daily Scrum Meeting（11.12）

    今天我们召开了Beta阶段MOOC项目开发的第一次Scrum Meeting,在会上就alpha阶段进行了总结,然后我们确定了 接下来的Beta阶段的项目分工,并且就每天的进度汇报做了一个约定,就是每 ...

  7. 【SE】Week7 : Silver Bullet & Cathedral and Bazaar & Big Ball of Mud & Waterfall ...

    1. Silver Bullet No Silver Bullet: Essence and Accidents of Software Engineering —— 无银弹理论,出自于美国1999年 ...

  8. linux内核分析第三周

    20135103王海宁 linux内核分析第三周 http://mooc.study.163.com/course/USTC-1000029000  按照课堂提供的方法,命令行一行行敲上去,我是手机缓 ...

  9. 暑假学习笔记（一）——初识Neo4j和APICloud入门

    暑假学习笔记(一)--初识Neo4j和APICloud入门 20180719笔记 1.Neo4j 接了学姐的系统测试报告任务,感觉工作很繁重,但是自己却每天挥霍时光.9月份就要提交系统测试报告了,但是 ...

  10. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 0. 准备工作

    一.关于 Python Python 是全球使用人数增长最快的编程语言!它易于入门.功能强大,从 Web 后端 到 数据分析.人工智能,到处都能看到 Python 的身影. Python 有两个主要的 ...