m3u8是蘋果公司推出一種視頻播放標準，是m3u的一種，不過編碼方式是utf-8。
瀏覽器播放m3u8文件，這裏使用video.js插件，下載地址： http://www.jq22.com/jquery-info404
下載最新版本v7.4.1，下載完成解壓打開進入，index.html就是demo代碼，修改<source>標籤的src設置爲m3u8的地址、type="application/x-mpegURL"。
例子：
<source src="http://recordcdn.quklive.com/upload/vod/user1462960877450854/1550739580345725/1/video.m3u8" type="application/x-mpegURL">
完整demo代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 7.4.1</title>
<link href="css/video-js.min.css" rel="stylesheet">
<style>
body {
background-color: #191919
}
.m {
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
poster="m.jpg" data-setup="{}">
<source src="http://recordcdn.quklive.com/upload/vod/user1462960877450854/1550739580345725/1/video.m3u8" type="application/x-mpegURL">
<!-- <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> -->
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
</video>
<script src="js/video.min.js"></script>
<script type="text/javascript">
//設置中文
videojs.addLanguage('zh-CN', {
"Play": "播放",
"Pause": "暫停",
"Current Time": "當前時間",
"Duration": "時長",
"Remaining Time": "剩餘時間",
"Stream Type": "媒體流類型",
"LIVE": "直播",
"Loaded": "加載完畢",
"Progress": "進度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Mute": "靜音",
"Unmute": "取消靜音",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "關閉字幕",
"Captions": "內嵌字幕",
"captions off": "關閉內嵌字幕",
"Chapters": "節目段落",
"Close Modal Dialog": "關閉彈窗",
"Descriptions": "描述",
"descriptions off": "關閉描述",
"Audio Track": "音軌",
"You aborted the media playback": "視頻播放被終止",
"A network error caused the media download to fail part-way.": "網絡錯誤導致視頻下載中途失敗。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "視頻因格式不支持或者服務器或網絡的問題無法加載。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由於視頻文件損壞或是該視頻使用了你的瀏覽器不支持的功能，播放終止。",
"No compatible source was found for this media.": "無法找到此視頻兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "視頻已加密，無法解密。",
"Play Video": "播放視頻",
"Close": "關閉",
"Modal Window": "彈窗",
"This is a modal window": "這是一個彈窗",
"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或啓用關閉按鈕來關閉此彈窗。",
", opens captions settings dialog": ", 開啓標題設置彈窗",
", opens subtitles settings dialog": ", 開啓字幕設置彈窗",
", opens descriptions settings dialog": ", 開啓描述設置彈窗",
", selected": ", 選擇",
"captions settings": "字幕設定",
"Audio Player": "音頻播放器",
"Video Player": "視頻播放器",
"Replay": "重播",
"Progress Bar": "進度小節",
"Volume Level": "音量",
"subtitles settings": "字幕設定",
"descriptions settings": "描述設定",
"Text": "文字",
"White": "白",
"Black": "黑",
"Red": "紅",
"Green": "綠",
"Blue": "藍",
"Yellow": "黃",
"Magenta": "紫紅",
"Cyan": "青",
"Background": "背景",
"Window": "視窗",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字體尺寸",
"Text Edge Style": "字體邊緣樣式",
"None": "無",
"Raised": "浮雕",
"Depressed": "壓低",
"Uniform": "均勻",
"Dropshadow": "下陰影",
"Font Family": "字體庫",
"Proportional Sans-Serif": "比例無細體",
"Monospace Sans-Serif": "單間隔無細體",
"Proportional Serif": "比例細體",
"Monospace Serif": "單間隔細體",
"Casual": "舒適",
"Script": "手寫體",
"Small Caps": "小型大寫字體",
"Reset": "重啓",
"restore all settings to the default values": "恢復全部設定至預設值",
"Done": "完成",
"Caption Settings Dialog": "字幕設定視窗",
"Beginning of dialog window. Escape will cancel and close the window.": "開始對話視窗。離開會取消及關閉視窗",
"End of dialog window.": "結束對話視窗"
});
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
</body>
</html>