我有15个视频需要展示。我不想创建15个页面,每个页面都有一个html5视频嵌入,针对不同的视频,我希望只有一个页面,并通过URL告诉播放器要加载什么。这样,我只需要15个自定义链接,但只有一个播放器和一个HTML页面。需要支持所有浏览器,包括iOS和Android。
例如:
- www.mysite.com/videoplayer.html?v=mymovie - www.mysite.com/videoplayer.html?v=mymovie&t=13.6 - 这将跳转到播放头的一段时间。 videoplayer.html
例如:
- www.mysite.com/videoplayer.html?v=mymovie - www.mysite.com/videoplayer.html?v=mymovie&t=13.6 - 这将跳转到播放头的一段时间。 videoplayer.html
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
alert('Query Variable ' + variable + ' not found');
}
var videoFile = getQueryVariable("v");
var videoElement = document.getElementById("mp4source");
videoElement.setAttribute("source", videoFile + ".mp4");
</script>
<video id="mp4" controls="controls">
<source id="mp4source" src="../videos/jude.mp4" type="video/mp4" />
</video>
Main.html
<div id="menubar1">
<a href="videoplayer.html?v=mymovie">Play Movie</a>
<a href="videoPlayer.html?v=mymovie&t=14.5">Chapter 2</a>
</div>
我是javascript的初学者,请在回答时尽量详细。
谢谢。
t
参数。我刚在iPad上测试了一下,结果还是一样的。它会跳转到正确的页面,但是无法加载视频文件。 - Thanu