DEMO地址：https://github.com/Tinywan/PHP_Experience
https://github.com/videojs/videojs-contrib-hls
下載JS文件，直接使用
<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
<source
src="https://example.com/index.m3u8"
type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>
videojs-contrib-hls支持一堆HLS功能。以下是一些亮點：
- 視頻點播和實況播放模式
- 備份或冗余流
- 中段質量切換
- AES-128段加密
- CEA-608字幕會自動翻譯成標准的HTML5 標題文字曲目
- In-Manifest WebVTT字幕自動翻譯成標准的HTML5字幕軌道
- 定時ID3元數據將自動翻譯成HTML5 metedata文本軌道
- 高度可定制的自適應比特率選擇
- 自動帶寬跟蹤
- 使用CORS支持跨域憑據
- 與video.js的緊密集成以及使用標准HTML API盡可能多地展現的理念
- 流多個音軌並切換到那些音軌（參見docs文件夾）獲取信息
- 片段MP4 中的媒體內容， 而不是MPEG2-TS容器格式。
方法：
獲取對象
var videoObj = videojs(“videoId”);
ready:
myPlayer.ready(function(){
//在回調函數中，this代表當前播放器，
//可以調用方法，也可以綁定事件。
})
播放：
myPlayer.play();
暫停：
myPlayer.pause();
獲取播放進度：
var whereYouAt = myPlayer.currentTime();
設置播放進度：
myPlayer.currentTime(120);
視頻持續時間，加載完成視頻才可以知道視頻時長，且在flash情況下無效
var howLongIsThis = myPlayer.duration();
緩沖，就是返回下載了多少
var whatHasBeenBuffered = myPlayer.buffered();
百分比的緩沖
var howMuchIsDownloaded = myPlayer.bufferedPercent();
聲音大小（0-1之間）
var howLoudIsIt = myPlayer.volume();
設置聲音大小
myPlayer.volume(0.5);
取得視頻的寬度
var howWideIsIt = myPlayer.width();
設置寬度：
myPlayer.width(640);
獲取高度
var howTallIsIt = myPlayer.height();
設置高度：
myPlayer.height(480);
一步到位的設置大小：
myPlayer.size(640,480);
全屏
myPlayer.enterFullScreen();
離開全屏
myPlayer.enterFullScreen();添加事件
durationchange
ended //播放結束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暫停
play //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
var myFunc = function(){
// Do something when the event is fired
};事件綁定
myPlayer.on("ended", function(){
console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
console.log("pause")
});
刪除事件
myPlayer.removeEvent(“eventName”, myFunc);
雖然文章說明在不支持html5的情況下，會以flash播放，但在支持html5的firefox下播放mp4時，卻遇到很大的困難，雖然調用了flash，但一直無法播放（不過我也一直懷疑我的firefox下的flash有問題，不知道是不是真的）。不過如果你聽從videojs的建議，放兩個格式的視頻，就不會有這個問題了。
另外video的寫法中還有專門針對flash的寫法，當然你也可以用這個插件實現純粹的flash播放（只寫flash那部分就好，可以保證統一的瀏覽效果，不過iOS的瀏覽器不兼容flash，這就要你自己進行判斷來處理
選項參數設置
如何使用，初始化
您可以在播放器初始化時將選項對象傳遞給hls源處理程序。你可以像你對video.js的其他部分一樣傳遞選項：
// html5 for html hls
videojs(video, {html5: {
hls: {
withCredentials: true
}
}});
// or
// flash for flash hls
videojs(video, {flash: {
hls: {
withCredentials: true
}
}});
// or
var options = {hls: {
withCredentials: true;
}};
videojs(video, {flash: options, html5: options});
資源
一些選項，例如withCredentials可以傳遞給hls player.src
var player = videojs('some-video-id');
player.src({
src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
type: 'application/x-mpegURL',
withCredentials: true
});
直接改變URL地址：
$(function () {
$("#form_button").click(function () {
var msg = $("#msg");
stream_address = $('input[name="stream_address"] ').val();
console.log(stream_address);
if (stream_address == "") {
$('#stream_address ').css("border", "1px #ff0000 solid");
msg.text("請輸入媒體流地址");
msg.addClass("warning");
return false;
} else {
$('#stream_address').css("border", "1px #ff00ff solid");
msg.text("error");
msg.removeClass("warning");
}
$('#stream_address_code ').html("\"" + stream_address + "\"");
player.src({
src:stream_address,
type:"application/x-mpegURL"
});
});
});
遇到的BUB、錯誤、解決方案！
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1
Nginx 配置文件修改跨域：
location /record {
add_header Cache-Control no-cache;
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
add_header 'Access-Control-Allow-Headers' 'Range';
types{
application/dash+xml mpd;
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /home/tinywan/video_recordings;
}