源码地址：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也不行的原因解决了

    源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...

  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. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

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

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

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

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

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

  7. vue中通过hls.js播放m3u8格式的视频

    近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取m3u8的视频这里就不在叙述了,只说一下怎么将m3u8格式的视频成功播放 一.m3u8和HLS介绍 1.M3U8文件是指UTF-8编码格式的 ...

  8. 流媒体测试笔记记录之————阿里云监控、OBS、FFmpeg拉流和推流变化比较记录

    OBS设置视频(512kbps)和音频(128kbps)比特率 阿里云监控结果: 使用FFmpeg拉流到Nginx 服务器测试比特率 第二次测试,修改视频和音频比特率 OBS设置 阿里云监控 Ngin ...

  9. video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

随机推荐

  1. C++动态加载DLL调用方法

    一.构建DLL路径 char szTmp[_MAX_PATH]; char* szPath = getcwd(szTmp, _MAX_PATH);//获取当前工作目录  //构建dll路径  strc ...

  2. 获取设备的mac地址和IP地址（android6.0以上专用）

    /** * 获取设备HardwareAddress地址 * @return */public static String getMachineHardwareAddress(){ Enumeratio ...

  3. ubuntu配置NFS

    ubuntu配置NFS: sudo apt-get install nfs-kernel-server 配置/etc/exports 例如:我们要将根目录下的 /opt/FriendlyARM/min ...

  4. 纯css的防止图片撑破页面的代码(图片自动缩放)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  6. uexQQ插件学习心得

    uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...

  7. Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'

    Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, ...

  8. YbSoftwareFactory 代码生成插件【二十】：DynamicObject的序列化

    DynamicObject 是 .NET 4.0以来才支持的一个类,但该类在.NET 4.0下未被标记为[Serializable] Attribute,而在.NET 4.5下则被标记了[Serial ...

  9. python代码中碰到的问题及解决

    一.针对raw_input输入的字符进行类型判断及转换: raw_input输入默认为字符,如果输入的是数字字符,想自动转换,即:输入为a,不做操作,如果输入为3,即转化为整数. 可利用try..ex ...

  10. 技巧分享：解决Word 2010当中“分页符”造成的空白行

    技巧分享:解决Word 2010当中“分页符”造成的空白行 P1:关于“分页符” 在Word当中插入“分页符”之后,后面的内容就会“更起一段”.就好像“换行符”(回车)会让后面的内容“另起一行”一样. ...