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

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协议视频内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！