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

使用套件以及业务说明：在使用海康萤石云的轻应用-视频开发套件的时候，根据公司需要，需要根据不同的直播地址在页面点击按钮切换直播的显示，效果图如下。前端框架用的是Layui

问题描述：在点击切换按钮的时候出现异常no source found in video tag，原因是我只使用了一个Video标签来加载多个视频源的，一个video只能加载一个视频源，于是我用拼参数的方式来加载多个视频源。

我的直播视频显示的总体思路:

1.将需要在前台的直播地址，封装到一个Array里面

2.从array中取出地址,按照直播地址的顺序构建切换的按钮

3.在按钮中添加点击事件方法,并且取到直播的地址和数组的id,传入切换直播的方法

4.直播方法中重新构建直播的html,并且附上直播的地址

HTML代码如下：

	

		
  	 
	

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 + "" + c + "";
					}
				}
				//初始化直播,获取第一个直播地址,开始直播
				var initUrl = videoUrlArray[1];
				$('#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 = ' c +'" autoplay src="" width="860px"	height="400px"	controls	playsInline 	webkit-playsinline  >  '
					$('#videoLabel').html(htmlVideo)
					//给新构建的直播html设置直播地址
					$('#' + c).attr("src", url);
					player = new EZUIKit.EZUIPlayer("" + c);
					// temp = c;
				}

			}