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

Posted 2023-02-22

【中文标题】通过 URL 传递变量以更改源标记

【英文标题】：Passing Variables via URL to change source tag

【发布时间】：2015-04-06 15:41:54

【问题描述】：

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

谢谢。

【参考方案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>

【讨论】：

干得好@Kaiido 它在桌面上运行没有问题。我在 iphone 上遇到了困难。代码是否只在 iso 设备上寻找 ogg 源代码？

@Thanu 不，解决方法只能访问 video 元素，而不是其来源。不设置t参数是否会出现问题？因为我没有任何 iphone 设备，所以我帮不了你太多，但它确实可以在我的 ipad 和 iOS 模拟器上运行

它没有t 参数。我刚刚在ipad上测试了还是一样的结果。它转到正确的页面，但没有加载视频文件。

哪个版本的iOS？

它在 8.1.3 上，我的 iPhone 在 8.1 上