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


Posted in HTML / CSS onDecember 04, 2020

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协议视频内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
前端水印的简单实现代码示例
Dec 02 #HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 #HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 #HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 #HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 #HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 #HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 #HTML / CSS
You might like
短波问题解答
2021/02/28 无线电
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP函数超时处理方法
2016/02/14 PHP
js改变css样式的三种方法推荐
2016/06/28 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
python超简单解决约瑟夫环问题
2015/05/12 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python 异常处理总结
2016/10/18 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Django中的ajax请求
2018/10/19 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
物流司机岗位职责
2013/12/28 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
个性与发展自我评价
2014/02/11 职场文书
节水倡议书范文
2014/04/15 职场文书
汽车专业求职信
2014/06/05 职场文书
广播体操比赛口号
2014/06/10 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
先进党支部事迹材料
2014/12/24 职场文书
2016猴年春节问候语
2015/11/11 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server