HTML5基于flash实现播放RTMP协议视频的示例代码

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就可以了

!!!看到评论里有人说不执行，我特地把网盘资源下载下来又看看了，没问题的，视频没反应的，可能是因为你用的文件协议打开html的，要用http格式打开啊，自己搞的apache吧

demo网盘下载链接：

链接: https://pan.baidu.com/s/1i7ATxe78jDaLnZM4YRb3tA 提取码: uqsa

2020年8月28：补充 video class 上加上vjs-fluid 可以实现resize效果，demo上估计没有吧

到此这篇关于HTML5基于flash实现播放RTMP协议视频的示例代码的文章就介绍到这了,更多相关html5播放RTMP协议视频内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！