场景需求:在一个静态视频模板页面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>