video.js 对接实时视频 rtmp/flv 格式

35 篇文章 0 订阅
21 篇文章 0 订阅

在用video.js 做实时视频对接rtmp格式时候发现只有5.8版本的JS才支持,更高的 7.1 就不支持了,所以在做时候要看好vode.js版本,一般在这个网址里面下http://www.jq22.com/jquery-info404

1.在页面中引用video-js.cs样式文件和video.js

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

2.html 部分

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
</video>

js 部分


//初始化视频设置
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 = staticsUrl+"/video/video-js.swf"; //调用flash兼容文件
		videojs.options.techOrder=['html5','flash']; //设置视频加载方式
/*如果不能播放,这样设置加载方式  videojs.options.techOrder=['flash'];*/ 
        
        //初始化视频
	function videoPlate() {
		videojs("example_video_1").ready(function () {
			this.src({
				src:videoUrl, //视频地址
				type: 'rtmp/flv'
			});
			var myPlayer = this;
			myPlayer.play();
		});
	};
videoPlate()

 

你可以使用 CSDN 上提供的 video.js 插件来播放 m3u8、flvrtmp 和 RTS 格式视频。首先,确保你已经引入了 video.js 的库文件和相关插件。 对于 m3u8 格式视频,你可以使用 video.js-contrib-hls 插件来支持。你需要在页面中引入以下文件: ```html <link href="//path/to/video-js.min.css" rel="stylesheet"> <script src="//path/to/video.min.js"></script> <script src="//path/to/videojs-contrib-hls.min.js"></script> ``` 然后,你可以在页面中添加一个 video 标签,并使用以下 JavaScript 代码来初始化播放器: ```javascript var player = videojs('my-video'); player.src({ src: 'path/to/video.m3u8', type: 'application/x-mpegURL' }); ``` 对于 flv 格式视频,你可以使用 videojs-flvjs 插件来支持。你需要在页面中引入以下文件: ```html <link href="//path/to/video-js.min.css" rel="stylesheet"> <script src="//path/to/video.min.js"></script> <script src="//path/to/flv.min.js"></script> <script src="//path/to/videojs-flvjs.min.js"></script> ``` 然后,你可以在页面中添加一个 video 标签,并使用以下 JavaScript 代码来初始化播放器: ```javascript var player = videojs('my-video'); player.src({ src: 'path/to/video.flv', type: 'video/flv' }); ``` 对于 rtmp 和 RTS 格式视频,你可以使用 videojs-flash 插件来支持。你需要在页面中引入以下文件: ```html <link href="//path/to/video-js.min.css" rel="stylesheet"> <script src="//path/to/video.min.js"></script> <script src="//path/to/videojs-flash.min.js"></script> ``` 然后,你可以在页面中添加一个 video 标签,并使用以下 JavaScript 代码来初始化播放器: ```javascript var player = videojs('my-video', { techOrder: ['flash'] }); player.src({ src: 'rtmp://path/to/video', type: 'rtmp/flv' }); ``` 记得将上述代码中的路径和文件名替换成你实际使用的视频文件路径和名称。希望这些信息能帮到你!如果还有其他问题,请继续提问。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值