且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-25 19:21:22

恕我直言 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 getQueryVariable in 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.

实例

播放电影                 第2章

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>