溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML5基于flash如何實現播放RTMP協議視頻，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體代碼如下所示：
<!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>另外，可能需要更新flash,更新完重啟電腦，然后點擊允許flash就可以了
感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5基于flash如何實現播放RTMP協議視頻”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
