免費AI編程助手
今天和大家分享有關(guān)于：“如何實現(xiàn)RTMP協(xié)議視頻？”這個問題的相關(guān)內(nèi)容分享，希望對大家在實戰(zhàn)中的開發(fā)有所幫助！
具體代碼如下所示：
<!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">
//設(shè)置中文
videojs.addLanguage('zh-CN', {
"Play": "播放",
"Pause": "暫停",
"Current Time": "當(dāng)前時間",
"Duration": "時長",
"Remaining Time": "剩余時間",
"Stream Type": "媒體流類型",
"LIVE": "直播",
"Loaded": "加載完畢",
"Progress": "進(jìn)度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Mute": "靜音",
"Unmute": "取消靜音",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "關(guān)閉字幕",
"Captions": "內(nèi)嵌字幕",
"captions off": "關(guān)閉內(nèi)嵌字幕",
"Chapters": "節(jié)目段落",
"Close Modal Dialog": "關(guān)閉彈窗",
"Descriptions": "描述",
"descriptions off": "關(guān)閉描述",
"Audio Track": "音軌",
"You aborted the media playback": "視頻播放被終止",
"A network error caused the media download to fail part-way.": "網(wǎng)絡(luò)錯誤導(dǎo)致視頻下載中途失敗。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "視頻因格式不支持或者服務(wù)器或網(wǎng)絡(luò)的問題無法加載。",
"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": "關(guān)閉",
"Modal Window": "彈窗",
"This is a modal window": "這是一個彈窗",
"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或啟用關(guān)閉按鈕來關(guān)閉此彈窗。",
", opens captions settings dialog": ", 開啟標(biāo)題設(shè)置彈窗",
", opens subtitles settings dialog": ", 開啟字幕設(shè)置彈窗",
", opens descriptions settings dialog": ", 開啟描述設(shè)置彈窗",
", selected": ", 選擇",
"captions settings": "字幕設(shè)定",
"Audio Player": "音頻播放器",
"Video Player": "視頻播放器",
"Replay": "重播",
"Progress Bar": "進(jìn)度小節(jié)",
"Volume Level": "音量",
"subtitles settings": "字幕設(shè)定",
"descriptions settings": "描述設(shè)定",
"Text": "文字",
"White": "白",
"Black": "黑",
"Red": "紅",
"Green": "綠",
"Blue": "藍(lán)",
"Yellow": "黃",
"Magenta": "紫紅",
"Cyan": "青",
"Background": "背景",
"Window": "視窗",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字體尺寸",
"Text Edge Style": "字體邊緣樣式",
"None": "無",
"Raised": "浮雕",
"Depressed": "壓低",
"Uniform": "均勻",
"Dropshadow": "下陰影",
"Font Family": "字體庫",
"Proportional Sans-Serif": "比例無細(xì)體",
"Monospace Sans-Serif": "單間隔無細(xì)體",
"Proportional Serif": "比例細(xì)體",
"Monospace Serif": "單間隔細(xì)體",
"Casual": "舒適",
"Script": "手寫體",
"Small Caps": "小型大寫字體",
"Reset": "重啟",
"restore all settings to the default values": "恢復(fù)全部設(shè)定至預(yù)設(shè)值",
"Done": "完成",
"Caption Settings Dialog": "字幕設(shè)定視窗",
"Beginning of dialog window. Escape will cancel and close the window.": "開始對話視窗。離開會取消及關(guān)閉視窗",
"End of dialog window.": "結(jié)束對話視窗"
});
videojs.options.flash.swf = 'js/video-js.swf';
// 初始化視頻，設(shè)為全局變量
var myPlayer = videojs('rtmpVideo', {
autoplay: true,
controls: true,//控制條
muted: true,// 靜音
preload: "auto",// 預(yù)加載
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', //這里設(shè)置你的播放資源，
type: 'rtmp/flv'
}]
}, function () {
console.log("--------------成功初始化視頻--------------");
myPlayer.one("playing", function () { // 監(jiān)聽播放
console.log("開始播放");
});
myPlayer.one("error", function (error) { // 監(jiān)聽錯誤
console.error("監(jiān)聽到異常，錯誤信息：%o",error);
});
});
</script>
</div>
</body>
</html> 另外，可能需要更新flash,更新完重啟電腦，然后點擊允許flash就可以了
!!!看到評論里有人說不執(zhí)行，我特地把網(wǎng)盤資源下載下來又看看了，沒問題的，視頻沒反應(yīng)的，可能是因為你用的文件協(xié)議打開html的，要用http格式打開啊，自己搞的apache吧
demo網(wǎng)盤下載鏈接：
鏈接: https://pan.baidu.com/s/1i7ATxe78jDaLnZM4YRb3tA 提取碼: uqsa
2020年8月28：補充 video class 上加上vjs-fluid 可以實現(xiàn)resize效果，demo上估計沒有吧
那么以上就是有關(guān)于：“如何實現(xiàn)RTMP協(xié)議視頻？”這個問題的全部解決方法和內(nèi)容，更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
