通过URL传递变量以更改源标记 [英] Passing Variables via URL to change source tag
问题描述
我需要展示15个视频。我没有创建15个页面，每个html5视频嵌入针对不同的视频，我宁愿只有一个页面，并通过URL告诉玩家要加载什么。这样我就可以拥有15个自定义链接，但只有一个播放器和一个html页面。所有浏览器，iOS和Android都需要支持此功能。
I have 15 videos I need to show. Instead of creating 15 pages with each html5 video embed targeting a different video, I rather have just one page and via the URL tell the player what to load. This way I can just have 15 custom links but just one player and one html page. Need this to be supported by all browsers, iOS and Android.
示例：
-
www.mysite.com/videoplayer.html?v=mymovie
www.mysite。 com / videoplayer.html？v = mymovie& t = 13.6 - 这应该跳到播放器播放头到某个时间点。
www.mysite.com/videoplayer.html?v=mymovie&t=13.6 - this should jump to the player playhead to a point in time.
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的初学者，请具体说明你的答案。
I'm a beginner to javascript, please be specific in your answers.
谢谢。
推荐答案
恕我直言 DOM操作将是一个更好的解决方案，但至少在现代浏览器中，它来自您的示例代码。
IMHO DOM Manipulation on the main page would be a better solution, but here it is, at least for modern browsers, from your example code.
-
我改变了你的
getQueryVariable以便能够使用它作为
布尔值。
I changed your
getQueryVariablein order to be able to use it as a boolean.
要更改当前播放时间，您必须等待加载
视频的元数据，然后你可以设置 currentTime
属性（以秒为单位）。
To change the current playback time, you will have to wait for the
video's metadata to be loaded, then you can set the currentTime
property (in seconds).
为了符合所有浏览器支持，您需要
到将您的视频转码为ogg vorbis格式，然后添加来源，指向此视频文件的
。这适用于主要的现代浏览器。
In order to comply the "all browsers" support you will have
to transcode your videos to ogg vorbis format, then add a source pointing to
this video file. This will do for major modern browsers.
对于旧浏览器，您必须添加 fallback （例如flash player或java applet）。
For older browsers, you will have to add a fallback (e.g. flash player or java applet).
对于 ios 中的跳跃播放头，你有一些技巧要做：看看这个问题，我个人使用此代码似乎适用于我的ipad ios 8.请注意，它缺少 autoplay 如果您决定将其添加到 video 标记中。
For the "jumping playhead" in ios, you have some tricks to do : look at this question , personally I used this code which seems to work on my ipad ios 8. Note that it will lack of autoplay if you decide to add it in the video tag.
实例
Play Movie Chapter 2
评论 videoplayer.html
Commented videoplayer.html
<video id="video" controls="controls">
<source id="mp4source" src="" type="video/mp4" />
<source id="oggSource" src="" type="video/ogg" />
</video>
<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];
}
}
//returning false will help knowing if that variable exists
return false;
}
function loadVideo() {
var videoFile = getQueryVariable("v");
//if v is not set
if (!videoFile) {
alert('please choose a video file, \n maybe you came here by accident?');
//no need to go further
return;
}
//Select the sources for the mp4 and the ogg version
var mp4source = document.getElementById("mp4source");
mp4source.setAttribute("src", videoFile + ".mp4");
var oggSource = document.getElementById("oggSource");
oggSource.setAttribute("src", videoFile + ".ogv");
//if t is set
if (getQueryVariable("t")) {
//userAgent can be overridden but it may be the best way to detect ios devices
var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/) !== null;
if (iOS) {
iOSLoadSeek();
} else {
//wait for the video meta data to be loaded
document.getElementById('video').addEventListener('loadedmetadata', function() {
//then change the time position
this.currentTime = getQueryVariable("t");
})
}
}
}
//ios load seek workaround, edited from https://gist.github.com/millermedeiros/891886
function iOSLoadSeek() {
var vid = document.getElementById('video');
if (vid.readyState !== 4) { //HAVE_ENOUGH_DATA
vid.addEventListener('canplaythrough', iosCanPlay, false);
vid.addEventListener('load', iosCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
vid.addEventListener('play', iosCanPlay, false); //Actually play event seems to be faster
vid.play();
setTimeout(function() {
vid.pause(); //block play so it buffers before playing
}, 10); //it needs to be after a delay otherwise it doesn't work properly.
}
}
//called when one of the three events fires
function iosCanPlay() {
//remove all the event listeners
this.removeEventListener('canplaythrough', iosCanPlay, false);
this.removeEventListener('load', iosCanPlay, false);
this.removeEventListener('play', iosCanPlay, false);
//finally seek the desired position
this.currentTime = getQueryVariable("t");
this.play();
}
//When the page is loaded, execute
window.onload = loadVideo();
</script>
这篇关于通过URL传递变量以更改源标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
