javascript - 通过 URL 传递变量以更改源标记

Question

我有 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 的初学者，请在您的回答中具体说明。

谢谢。

Answer 1

恕我直言DOM Manipulation在主页上将是一个更好的解决方案，但至少对于现代浏览器而言，它来自您的示例代码。

• 我更改了您的 getQueryVariable 以便能够将其用作 bool 值。

• 要更改当前播放时间，您必须等待加载视频的元数据，然后你可以设置 currentTime属性(以秒为单位)。

• 为了遵守“所有浏览器”支持，您将拥有将您的视频转码为 ogg vorbis 格式，然后添加一个 source 指向这个视频文件。这适用于主要的现代浏览器。

• 对于旧版浏览器，您必须添加 fallback (例如 Flash 播放器或 Java 小程序)。

• 对于 ios 中的“跳跃播放头”，您有一些技巧可以做:看this question , 我个人用过 this code这似乎适用于我的 ipad ios 8。请注意，如果您决定将其添加到 video 标签中，它将缺少 autoplay 。

• 现在，您无法为所有浏览器 获取视频(例如 text-based browsers)。

  ---

实例

---

Play Movie Chapter 2

---

评论了 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>