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 applet）。
对于 ios 中的“跳跃播放头”，你有一些技巧要做：看this question，我亲自使用{{3}这似乎适用于我的ipad ios 8.请注意，如果您决定将其添加到autoplay标记中，它将缺少video。
现在，您无法获取所有浏览器的视频（例如this code）。

直播示例

text-based browsers Play Movie

评论 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传递变量以更改源标记

1 个答案: