源碼地址：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 播放正常