萤石云视频直播切换出现no source found in video tag.的问题解决方法

使用套件以及业务说明:在使用海康萤石云的轻应用-视频开发套件的时候,根据公司需要,需要根据不同的直播地址在页面点击按钮切换直播的显示,效果图如下。前端框架用的是Layui在这里插入图片描述
问题描述:在点击切换按钮的时候出现异常no source found in video tag,原因是我只使用了一个Video标签来加载多个视频源的,一个video只能加载一个视频源,于是我用拼参数的方式来加载多个视频源。

在这里插入图片描述

我的直播视频显示的总体思路:
1.将需要在前台的直播地址,封装到一个Array里面
2.从array中取出地址,按照直播地址的顺序构建切换的按钮
3.在按钮中添加点击事件方法,并且取到直播的地址和数组的id,传入切换直播的方法
4.直播方法中重新构建直播的html,并且附上直播的地址
HTML代码如下:

	<div id="videoLabel">
		<video id="myPlayer" autoplay src="" width="860px" height="400px" controls playsInline webkit-playsinline> </video>
  	 </div>
	<div id="videoButton"></div>
var videoUrlArray = new Array(); //直播视频存的url

//存入视频的地址
videoUrlArray[0] = "http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8";
videoUrlArray[1] = "http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8";
videoUrlArray[2] = "http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8";
videoUrlArray[3] = "http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8";

//调用方法
setVideoUrl()

var urlButton = '';
	//设置直播视频以及切换的按钮
			function setVideoUrl() {
				for (c = 0; c < videoUrlArray.length; c++) {
					var videoUrl = videoUrlArray[c];
					if (videoUrl != null && videoUrl != '') {
						urlButton = urlButton + "<button class='layui-btn'  onClick='onClickVideo(" + c + ")' >" + c + "</button>";
					}
				}
				//初始化直播,获取第一个直播地址,开始直播
				var initUrl = videoUrlArray[0];
				$('#myPlayer').attr("src", initUrl);
				player = new EZUIKit.EZUIPlayer('myPlayer');
				// 播放
				player.play();

				$("#videoButton").html(urlButton);
			}
			//按钮的点击事件
			onClickVideo = function(c) {
				var url = videoUrlArray[c];
				switchVideo(url, c)
			}
			//切换直播的的方法
			function switchVideo(url, c) {
				//初始化判断
				var src = $('#myPlayer').attr("src");
				if (src != 'undefined') {
					//videoLabel
					player.stop();
					//重新构建直播的html
					var htmlVideo = '<video id="' + c +'" autoplay src="" width="860px"	height="400px"	controls	playsInline 	webkit-playsinline  >  </video>'
					$('#videoLabel').html(htmlVideo)
					//给新构建的直播html设置直播地址
					$('#' + c).attr("src", url);
					player = new EZUIKit.EZUIPlayer("" + c);
					// temp = c;
				}

			}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

寒武纪07

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值