通过URL传递变量以更改源标签

Question

通过URL传递变量以更改源标签

javascripthtmlparameter-passingurl-parameters

3

我有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

<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的初学者，请在回答时尽量详细。

谢谢。

- Thanu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaiido · Accepted Answer

在我看来，DOM操作在主页面上会是更好的解决方案，但根据你的示例代码，这里至少可以适用于现代浏览器。

我修改了你的 getQueryVariable 以便能够将其用作布尔值。
要更改当前播放时间，您必须等待视频元数据加载完成，然后可以设置 currentTime 属性（以秒为单位）。
为了符合"所有浏览器" 的支持，您需要将视频转码为 ogg vorbis 格式，然后添加一个指向此视频文件的 source。这对于主要现代浏览器来说已经足够了。
对于旧版浏览器，您需要添加一个 fallback（例如 flash 播放器或 java applet）。
对于ios 中的 "跳动播放头"，您需要做一些技巧：查看 this question ，个人使用了 this code，在我的 ipad ios 8 上似乎有效。请注意，如果您决定在 video 标签中添加 autoplay，它将缺少此功能。
现在，您无法在所有浏览器中获取视频（例如text-based browsers）。

现场演示

播放电影第二章节

已注释的 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>