<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 7</title>
<link href="css/video-js.min.css" rel="stylesheet">
<style>
body{background-color: #191919}
.m{ width: 640px; height: 264px; margin-left: auto; margin-right: auto; margin-top: 100px; }
</style>
</head>
<body>
<div class="m">
<video id="rtmpVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" controls preload="auto" width="640" height="264" data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
</video>
<script src="js/video.min.js"></script>
<script src="js/videojs-flash.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.": "結束對話視窗"
});
videojs.options.flash.swf = 'js/video-js.swf';
// 初始化視頻，設為全局變量
var myPlayer = videojs('rtmpVideo', {
autoplay: true,
controls: true,//控制條
muted: true,// 靜音
preload: "auto",// 預加載
language: "zh-CN",// 初始化語言
playbackRates: [1, 2, 3, 4, 5, 8, 10, 20],// 播放速度
'techOrder': ['flash'],
sources: [{
/*rtmp://live.hkstv.hk.lxdns.com/live/hks*/
src: 'rtmp://www.uav-space.com/vod2/uspace3.mp4', //這里設置你的播放資源，
type: 'rtmp/flv'
}]
}, function () {
console.log("--------------成功初始化視頻--------------");
myPlayer.one("playing", function () { // 監聽播放
console.log("開始播放");
});
myPlayer.one("error", function (error) { // 監聽錯誤
console.error("監聽到異常，錯誤信息：%o",error);
});
});
</script>
</div>
</body>
</html>
!!!看到評論里有人說不執行，我特地把網盤資源下載下來又看看了，沒問題的，視頻沒反應的，可能是因為你用的文件協議打開html的，要用http格式打開啊，自己搞的apache吧
到此這篇關于HTML5基于flash實現播放RTMP協議視頻的示例代碼的文章就介紹到這了,更多相關html5播放RTMP協議視頻內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
