js获取url?号后面的参数,根据?后面的参数,页面显示不同视频

场景需求:在一个静态视频模板页面html,根据 ?type=test 显示不同的视频文件。

远方要访问视频点击的按钮:

<a href="http://www.hrj.cn/video-view.html?type=12002-list">视频显示</a>

html显示视频视频:

<div class="video-box-view">
	<video id="suiOfficialVideo" src="" controls="controls" width="100%" height="100%"></video>
</div>

js代码:

<script>
		        /**	
			 * 数据源文件 key-是进入页面的url 参数 根据key->获取知道的视频文件
			 * '参数'-'视频地址'
			 */
			 
			var voidSource ={
				'12004-list':"https://www.hrj.com/video/a.mp4",
				'12003-list': "https://www.hrj.com/video/b.mp4",
				'12002-list': "https://www.hrj.com/video/c.mp4",
				'12001-list': "https://www.hrj.com/video/d.mp4"
			};
			var $myVideo = $('#suiOfficialVideo');
			 //进入执行
			 getVoid();
			/*
			 * 获取 url parma参赛
			 * */
			function getParam(paramName) {
				paramValue = "", isFound = !1;
				if(this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
					arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
					while(i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
				}
				return paramValue == "" && (paramValue = null), paramValue
			}
			
			//判断选择哪个url
			function getVoid(){
				 var type = getParam('type');
				  
				 $myVideo.attr({
			    	"src" :  voidSource[type]
			  });
			};
			 
			
</script>

猜你喜欢

转载自blog.csdn.net/weixin_42659625/article/details/80987467