videojs动态更换视频源

最新推荐文章于 2024-04-24 11:38:51 发布
最新推荐文章于 2024-04-24 11:38:51 发布
阅读量1.6w 收藏 15
点赞数 8
分类专栏： 其它 文章标签： videojs flv rtmp hls rtsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42558057/article/details/102963509
版权

在使用videojs播放rtmp直播流时，遇到的问题记录：

  1. src中的type可以不指定,若指定则不能错.hls的为mpegts流,type为’application/x-mpegURL’ rtmp的type：‘rtmp/flv’ http-flv type:‘video/flv’
  2. videojs.options.flash.swf = ‘./js/video-js.swf’ 指定swf位置,否则需要访问公网从cdn下载
  3. 动态更换播放的视频源时，需要先用dispose()销毁，再重新创建，dispose方法会连同dom一同删除，故需要创建dom （如果直接创建video元素，注意生成的object不能在video标签下面，否则页面不报错但不能播放，最好创建一个div ,将其innerHTML设为’<video id=’+id+’ classe="" …>’）

http://www.fly63.com/nav/1213
动态创建html元素：https://www.jb51.net/article/135376.htm

视频播放插件 Video.js https://www.jianshu.com/p/9414886a8963

<!DOCTYPE html>
<html>
<head>
<title>vod</title>
<!-- 导入的videojs是7.0版本以上的，集成VHS协议库，可播放HLS流媒体视频 -->
<link href="./js/video-js.min.css" rel="stylesheet" type="text/css">
<script src="./js/video.min.js"></script>
<!-- 引入的videojs-flash.js插件主要是为播放rtmp视频流-->
<script src="./js/videojs-flash.min.js"></script>
<!-- 引入的flv.js插件主要flv转为h5-->
<script src="./js/flv.min.js"></script>
<style>
.top {
	width: 100%;
	height: 300px;
	margin: 0;
}

.left {
	width: 50%;
	height: 300px;
	float: left;
}

.right {
	float: left;
	width: 50%;
	height: 300px;
}

.buttom {
	position: relative;
	top: 50px;
	width: 100%;
	height: 300px;
}

.foot {
	position: relative;
	top: 150px;
	width: 100%;
	height: auto;
}
</style>
<style>
.controls {
	display: block;
	width: 100%;
	text-align: left;
	position: relative;
	top: 10px;
}
</style>
<script>
var h5url='http://192.168.0.101/live/channel1.flv';
<!-- RTMP直播源地址-->
var rtmpurl='rtmp://192.168.0.101:1935/live/channel1';
 <!-- http-flv直播源地址-->
var flvurl="http://192.168.0.101/live/channel1.flv";
<!-- hls直播源地址-->
var hlsurl="http://192.168.0.101/live/channel1.m3u8";
</script>
</head>
<body>
	<div id='top' class="top">
		<div id='tl' class="left">
			<p id='tlp' align="center">rtmp</p>
			<video id='rtmp' width="600" height="300"
				class="video-js vjs-default-skin vjs-big-play-centered" controls
				preload="none">
			</video>
		</div>
		<div id='tr' class="right">
			<p id='trp' align="center">hls</p>
			<video id='hls' width="600" height="300"
				class="video-js vjs-default-skin vjs-big-play-centered" controls
				preload="none">
			</video>
		</div>
	</div>
	<div id='buttom' class="buttom">
		<div id='bl' class="left">
			<p id='blp' align="center">h5</p>
			<video id="h5_flv" width="600" height="300" controls preload="none"></video>
		</div>
		<div id='br' class="right">
			<p id='brp' align="center">http-flv</p>
			<video id='flv' width="600" height="300"
				class="video-js vjs-default-skin vjs-big-play-centered" controls
				preload="none">
				<source src="http://192.168.0.101/live/test.flv">
			</video>
		</div>
	</div>	
	<div id='foot' class='foot'>
		<input id="text" type="text" placeholder="channel name" style="width:30%" 
			title="播放的视频通道名称" />
		<button id='seturl' onclick="changurl()" title="更换播放的视频地址">更换视频源</button>
		<select id="select" title='更换指定窗口的视频源'>
			<option value="all">all</option>
			<option value="h5">h5</option>
			<option value="rtmp">rtmp</option>
			<option value="flv">flv</option>
			<option value="hls">hls</option>			
		</select>
	</div>
</body>

<script>

	function createdom(fid,id){			
		var newVideo = document.createElement("div");//创建一个标签		
		newVideo.innerHTML = '<video id='+ id +' width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none"></video>';
		var Fid = document.getElementById(fid);//通过id号获取newVideo的父节点（也就是上一级的节点）
		Fid.appendChild(newVideo);//把创建的节点newVideo添加到父节点中；
	}

	function h5_play(videourl){  
		var player;	
		var element= document.getElementById('h5_flv');
        if (flvjs.isSupported()) {
            player = flvjs.createPlayer({
                type: 'flv',
				isLive: true,
                url: videourl
            });
            player.attachMediaElement(element);
            player.load(); //加载
			//player.play();
        }
		return player;
	}  
	
	
	var player_h5;
	var player_rtmp;
	var player_flv;
	var player_hls;
	
	
	function playh5(){
		player_h5=h5_play(h5url);	
		player_h5.play();
	}
	
	function h5_destroy(player) {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }
	
	videojs.options.flash.swf = './js/video-js.swf';	//指定swf播放器的路径,不指定默认从cdn下载
	function playrtmp(id){
		player_rtmp = videojs(id,{ 
										sources: [{
													src: rtmpurl,
													type: 'rtmp/flv'
												}]
										},
										function(){console.log('rtmp播放器初始化成功')})
		player_rtmp.play();	
	}
	
	function playflv(id){
		//var player_flv = videojs('flv', {}, function(){console.log('flv播放器初始化成功')})
		player_flv = videojs(id, {
										sources: [{
													src: flvurl,
													type: 'video/flv' 
												}] 
											},
										function(){this.load();console.log('flv播放器初始化成功')})            
		player_flv.play();
	}
	
	function playhls(id){
		player_hls = videojs(id,{ 
										sources: [{
													src: hlsurl,
													type: 'application/x-mpegURL' //可以不指定type,如果指定则类型不能错(hls为mpegts流)
												}]
										},											
										function(){console.log('hls播放器初始化成功')})           
		player_hls.play();
	}
	
	function playAll(){        
		playh5();
		playrtmp('rtmp');
		playflv('flv');
		playhls('hls');		
	}
	
	function changurl(){
		var channel=document.getElementById('text').value;	
		var myselect=document.getElementById("select");	
		var index=myselect.selectedIndex;	
		var value=myselect.options[index].value;
		if(value==="all"){
			rtmpurl="rtmp://192.168.0.101:1935/live/"+channel;
			flvurl="http://192.168.0.101/live/"+channel+".flv";
			h5url="http://192.168.0.101/live/"+channel+".flv";
			hlsurl="http://192.168.0.101/live/"+channel+".m3u8";
			player_rtmp.dispose();
			player_hls.dispose();
			player_flv.dispose();
			createdom('tl','rtmp');
			createdom('tr','hls');
			createdom('br','flv');	
			h5_destroy(player_h5);			
			playAll();
		}else if(value==="h5"){
			h5url="http://192.168.0.101/live/"+channel+".flv";
			h5_destroy(player_h5);
			playh5();
		}else if(value==="rtmp"){
			rtmpurl="rtmp://192.168.0.101:1935/live/"+channel;
			player_rtmp.dispose();
			createdom('tl','rtmp');
			playrtmp('rtmp');
		}else if(value==="flv"){
			flvurl="http://192.168.0.101/live/"+channel+".flv";
			player_flv.dispose();
			createdom('br','flv');
			playflv('flv');
		}
		else if(value==="hls"){
			hlsurl="http://192.168.0.101/live/"+channel+".m3u8";
			player_hls.dispose();
			createdom('tr','hls');
			playhls('hls');
		}else{
			console.log(channel+":"+value);
		}
		console.log("h5url:"+h5url);
		console.log("rtmpurl:"+rtmpurl);
		console.log("flvurl:"+flvurl);
		console.log("hlsurl:"+hlsurl);
	}
	
	
</script>
<script type="text/javascript">	
   window.onload = playAll(); 
</script>

</html>
阿木娄
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
videojs源码，浏览器播放操作，网页视频操作
07-29
videojs源码，处理网页video上的播放相关操作，非常好用
videojs-adaptive-source:video.js插件，用于根据客户端的互联网速度切换视频
05-04
link href =" videojs-adaptive-source.css " rel =" stylesheet " >< script src =" video.js " > </ script >< script src =" videojs-adaptive-source.js " > </ script >< video...
vue+videojs动态切换flv视频流
qq_42351255的博客
07-03 3232
使用vue3.x+videojs+flv.js。
Vue3+Ts+video.js:实现自定义视频播放
最新发布
qq_67718812的博客
04-24 1054
video.js是一款通用的视频播放工具，相较于直接使用video标签，video.js不存在兼容性问题，同时还有这强大的插件库使自定义播放器成为可能，本文主要简单介绍如何使用video.js，以及常用的基本配置。
web视频上传和播放功能
qq_31848117的博客
11-05 1395
视频播放协议有rtmp和hls rtmp延时低 但是需要flash，后产生http-flv协议，使用flv.js hls苹果提出，所有平台可用。 rtmp 百度video.js cdn 下载video.min.js&video-js.min.css v 百度videojs-flash 下载videojs-flash.min.js 还需要video-js.swf 代码 <!DOCTYP...
vue中video.js修改播放地址
weixin_43993581的博客
07-30 2253
发现直接修改播放器配置不生效，加载的还是初始化时的播放配置 直接修改dom <div class="video-player-box vjs-big-play-centered" ref="videoPlayer" <!--绑定ref--> :playsinline="playsinline" @play="onPlay...
Video.js插件切换视频源并操作m3u8格式视频
热门推荐
仰望星空
10-05 2万+
目录 第一章 videojs的配置与简介 第二章 更改视频源代码与实例 第三章 api的部分应用实例 第四章 视频api补充介绍 添加事件 事件绑定 前言：老师让我修改一个需要播放器的界面，之前的播放器有挺多功能需要修改，于是就从网上找了新的播放器插件，也就是Video.js，在网上找了挺久没什么靠谱的资料，于是记录一下。 第一章 videojs的配置与简介 关于videojs我...
vue使用vedio.js播放视频（切换视频源）
reofadu的博客
04-06 4443
vedio.js官方vue教程是采用组件模式，切换视频失败。 参考和众多网上教程，最后采用去掉组件，直接调用this.player.src（）方法切换成功记录下。 后续再研究组件的加载和传函数和参数的问题。 环境参数： “video.js”: “^7.11.4”, “vue”: “^2.6.11”, 代码如下： <template> <div> <button type="submit" class="btn btn-primary" @click="h
vue3 videojs实现播放器，动态更改src
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-17 3008
1.vue框架更改对应数据data，对应的视图view变化。2.在封装的组件监听传参src的变化，如果点击的 src和之前的不同，进行切换资源，播放器重新加载播放；3.播放器的资源source的参数有src+type，注意type可以不设置。推荐用法：不设置type，如果要设置一定要更传过来的视频流的数据格式保持一致，否则会爆红。
Js视频播放器插件Video.js使用方法详解
10-15
要创建一个视频播放器，你需要在HTML中添加一个`<video>`标签，并配置相应的属性，如`id`、`controls`、`width`、`height`以及视频源`<source>`。例如： ```html <video id="example_video_1" class="video-js vjs-...
videojs-contrib-media-sources:用于使用媒体源扩展API和video.js的代码-Source code
03-25
videojs-media-sources 注意： 已弃用该项目，并在其。 VHS支持HLS和DASH，并且内置在video.js 7中，请参阅 video.js的填充程序。 媒体源扩展（MSE）是W3C草案规范，可以将数据直接馈送到视频元素。 MSE允许视频开发人员直接在javascript中构建自适应流等功能。 维护状态：稳定 用生成的目录 入门 在本机支持Media Source Extensions的浏览器上，将使用HTML实现。 如果您在没有MSE的环境中运行，将使用Flash支持的polyfill。 当前，Flash polyfill仅支持以FLV文件格式编码的视频内容。 有关FLV的结构信息，Adobe在其站点上托管了的。 Flash polyfill尝试通过以固定速率异步将字节提供给SWF，以平衡最终用户对FLV的吞吐量。 默认情况下，该速率上限为4MB / s。 如
video.min.js
01-02
支持ie8的视频播放器！！！！！！！！！！！！！！！！！！！！！！！
videojs-vpaid:覆盖VideoJS视频播放器的VPAID插件。 稳定，但始终在进行中
05-18
它包含额外的代码，允许它从URL提取VPAID信息并通过VideoJS视频包装将其加载。 我决定将其变成VideoJS插件，而不是VideoJS Tech，只是因为它似乎最容易执行并在结束后将其删除。 正在工作： LiveRail VPAID广告...
在react项目中引入video.js，源代码包括对视频播放组件的封装，手写控制条相关功能
07-27
在react项目中引入video.js开发视频播放功能，源代码包括对视频播放组件的封装，手写控制条相关功能，以及自定义样式，实现控制条和视频相分离的样式， 主要包括暂停/播放切换，倍速播放，切换上一个、下一个视频，...
RTSP_Node.js_HTML5视频流转换工具_
10-01
打开新的cmd窗口，切换到jsmpeg-master，执行node websocket-relay.js supersecret 8000 8082 第一个端口是你rtsp源的端口，第二个是你ws的端口区流的端口6.执行ffmpeg -i "你的rtsp地址" -q 1 -f mpegts ...
用原生js实现选项卡切换、视频切换和留言/讨论功能
qq_56715703的博客
11-16 375
用原生JavaScript实现目录和讨论之间的选项卡切换，实现了视频根据目录中的选项切换，实现了留言/讨论功能
Video.js使用教程(二)
Mr.小强的博客
04-12 1万+
在上一篇文章中已经记述了video.js的使用，没看到的童鞋请点击这里观看，所以在这一篇中就主要是说说遇到的一下问题，及怎么兼容rtmp和hls。 1、播放rtmp流提示No compatible source was found for this media 这是你的浏览器没有开启flash的原因，只要将flash开启就好了，具体操作看下图： 将2步骤处点击后更改为允许，在刷新页面就好...
VHS介绍
weixin_30389003的博客
11-09 1358
Java.JS HTTP流传输（VHS）介绍“我怎么才能让我的视频和Video.js一起玩？”“ 这是我们在使用Vio.js时最常见的问题之一。这是个好问题。 如果有人检查了Vo.js的拷贝，他们的内容可能在一个浏览器上播放，而不是另一个。为了获得对特定类型内容的跨浏览器支持，他们必须偶然发现相关的源处理程序（例如，针对HLS内容的videojs-contrib-hls）。只有在包含源处理程序...
videojs切换视频
06-07
要在Video.js中切换视频，可以使用以下代码： ```javascript //获取video.js播放器对象 var player = videojs('my-video'); //设置新的视频源 var newSource = { src: 'http://example.com/path/to/new/video.mp4', type: 'video/mp4' }; //切换视频 player.src(newSource); player.load(); //重新加载新视频 player.play(); //自动开始播放新视频 ``` 这将获取Video.js播放器对象，设置新的视频源，然后使用`src()`方法切换视频。最后，使用`load()`方法重新加载新视频并使用`play()`方法自动开始播放新视频。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值