通过 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 以便能够将其用作 布尔值。

• 要更改当前播放时间，您必须等待 要加载视频的元数据，然后您可以设置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>