HTML5基于flash實(shí)現(xiàn)播放RTMP協(xié)議視頻的示例代碼

發(fā)布時(shí)間：2020-12-04 16:36:15 作者：努力的阿花

這篇文章主要介紹了HTML5基于flash實(shí)現(xiàn)播放RTMP協(xié)議視頻的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

HTML5基于flash實(shí)現(xiàn)播放RTMP協(xié)議視頻，具體代碼如下所示：

<!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)前時(shí)間",
			  "Duration": "時(shí)長(zhǎng)",
			  "Remaining Time": "剩余時(shí)間",
			  "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ò)錯(cuò)誤導(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": "這是一個(gè)彈窗",
			  "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": "字體庫(kù)",
			  "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.": "開始對(duì)話視窗。離開會(huì)取消及關(guān)閉視窗",
			  "End of dialog window.": "結(jié)束對(duì)話視窗"
			});

		   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",// 初始化語(yǔ)言
    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)聽錯(cuò)誤
        console.error("監(jiān)聽到異常，錯(cuò)誤信息：%o",error);
    });
});
		</script>
	</div>

</body>
</html>

另外，可能需要更新flash,更新完重啟電腦，然后點(diǎn)擊允許flash就可以了

!!!看到評(píng)論里有人說不執(zhí)行，我特地把網(wǎng)盤資源下載下來又看看了，沒問題的，視頻沒反應(yīng)的，可能是因?yàn)槟阌玫奈募f(xié)議打開html的，要用http格式打開啊，自己搞的apache吧

demo網(wǎng)盤下載鏈接：

鏈接: https://pan.baidu.com/s/1i7ATxe78jDaLnZM4YRb3tA 提取碼: uqsa

2020年8月28：補(bǔ)充 video class 上加上vjs-fluid 可以實(shí)現(xiàn)resize效果，demo上估計(jì)沒有吧

到此這篇關(guān)于HTML5基于flash實(shí)現(xiàn)播放RTMP協(xié)議視頻的示例代碼的文章就介紹到這了,更多相關(guān)html5播放RTMP協(xié)議視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！