更改html5视频标签上的来源

2020/11/16 18:22 · javascript ·  · 0评论

我正在尝试构建一个随处可见的视频播放器。到目前为止,我将与:

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(在几个网站上都可以看到,例如所有人的视频),到目前为止,一切都很好。

但是现在我也想要某种播放列表/菜单以及视频播放器,从中我可以选择其他视频。那些应该立即在我的播放器中打开。因此,我将不得不“动态地更改视频的来源”(如dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/所示-“让我们看另一部电影“)和javascript。让我们暂时忘记Flash Player(以及IE)部分,我将在以后尝试解决。

所以我的JS更改<source>标签应该是这样的:

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

问题是,这不适用于所有浏览器。即,firefox = O有一个不错的页面,您可以在其中观察到我遇到的问题:http : //www.w3.org/2010/05/video/mediaevents.html

我一触发load()方法(在firefox中,请注意),视频播放器就会死亡。

现在我发现,当我不使用多个<source>标签,而是仅在<video>标签中使用一个src属性时,整个事情就可以在Firefox中使用。

所以我的计划是仅使用该src属性,并使用canPlayType()函数确定适当的文件

我在某种程度上做错了还是使事情复杂化了?

我讨厌所有这些答案,因为它们太短或依赖于其他框架。

这是“一种”原始JS方式,可以在Chrome中运行,请在其他浏览器中进行测试:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

<video id="video" width="320" height="240"></video>

JS:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {  
    video.pause();

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load();
    video.play();
}, 3000);

Modernizr对我来说就像是一种魅力。

我所做的是我没有使用过<source>由于视频仅在第一次调用load()时才起作用,因此以某种方式使事情搞砸了。相反,我使用了视频标签->中的source属性,<video src="blabla.webm" />并使用Modernizr来确定浏览器支持的格式。

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

希望这会对您有所帮助:)

如果您不想使用Modernizr,则可以始终使用CanPlayType()

你原来的计划对我来说听起来不错。<source>如W3规范说明所示,您可能会发现更多处理动态管理元素的浏览器怪癖

如果已将元素插入视频或音频元素中,则动态修改源元素及其属性将无效。要更改正在播放的内容,只需直接在media元素上使用src属性,可能使用canPlayType()方法从可用资源中进行选择。通常,在解析文档后手动操作源元素是不必要的复杂方法。

http://dev.w3.org/html5/spec/Overview.html#the-source-element

我用这个简单的方法解决了

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}

与其让同一个视频播放器加载新文件,不如擦除整个<video>元素并重新创建它。如果src正确,大多数浏览器会自动加载它。

示例(使用Prototype):

var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });

vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });

$('container_div').update(vid);

根据规格

如果已将元素插入视频或音频元素中,则动态修改源元素及其属性将无效。要更改正在播放的内容,只需直接在media元素上使用src属性,可能使用canPlayType()方法从可用资源中进行选择。通常,在解析文档后手动操作源元素是不必要的复杂方法。

因此,您尝试做的事情显然不起作用。

只需放置一个div并更新内容...

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>

Yaur:尽管您复制并粘贴的内容是很好的建议,但这并不意味着即使在IE9(或IE8)中也无法优雅地更改HTML5视频元素的源元素。(此解决方案不涉及替换整个视频元素,因为这是不好的编码习惯)。

可以在此处找到通过javascript更改/切换HTML5视频标签中视频的完整解决方案,并已在所有HTML5浏览器(Firefox,Chrome,Safari,IE9等)中进行了测试。

如果这样做有帮助,或者您遇到麻烦,请告诉我。

我带有此功能可以动态更改视频源。有时在Firefox中不会触发“ canplay”事件,因此我添加了“ loadedmetadata”。我也暂停上一个视频,如果有一个...

var loadVideo = function(movieUrl) {
    console.log('loadVideo()');
    $videoLoading.show();
    var isReady = function (event) {
            console.log('video.isReady(event)', event.type);
            video.removeEventListener('canplay', isReady);
            video.removeEventListener('loadedmetadata', isReady);
            $videoLoading.hide();
            video.currentTime = 0;
            video.play();
        },
        whenPaused = function() {
            console.log('video.whenPaused()');
            video.removeEventListener('pause', whenPaused);
            video.addEventListener('canplay', isReady, false);
            video.addEventListener('loadedmetadata', isReady, false); // Sometimes Firefox don't trigger "canplay" event...
            video.src = movieUrl; // Change actual source
        };

    if (video.src && !video.paused) {
        video.addEventListener('pause', whenPaused, false);
        video.pause();
    }
    else whenPaused();
};

这是我的解决方案:

<video id="playVideo" width="680" height="400" controls="controls">
    <source id="sourceVideo" src="{{video.videoHigh}}" type="video/mp4">
</video>
    <br />
<button class="btn btn-warning" id="{{video.videoHigh}}" onclick="changeSource(this)">HD</button>
<button class="btn btn-warning" id="{{video.videoLow}}" onclick="changeSource(this)">Regular</button>

<script type="text/javascript">
    var getVideo = document.getElementById("playVideo");
    var getSource = document.getElementById("sourceVideo");
    function changeSource(vid) {
        var geturl = vid.id;
        getSource .setAttribute("src", geturl);
        getVideo .load()
        getVideo .play();
        getVideo .volume = 0.5;
    }
</script>

我有一个类似的Web应用程序,根本没有遇到这种问题。我所做的是这样的:

var sources = new Array();

sources[0] = /path/to/file.mp4
sources[1] = /path/to/another/file.ogg
etc..

然后,当我想更改源时,我有一个执行以下操作的函数:

this.loadTrack = function(track){
var mediaSource = document.getElementsByTagName('source')[0];
mediaSource.src = sources[track];

    var player = document.getElementsByTagName('video')[0];
    player.load();

}

我这样做是为了使用户可以通过播放列表进行操作,但是您可以检查userAgent,然后以这种方式加载适当的文件。我尝试像Internet上的每个人一样建议使用多个源标签,但是我发现它更整洁,并且更可靠地操作单个源标签的src属性。上面的代码是从内存中写入的,因此我可能已经掩盖了一些详细信息,但是总体思路是在适当时使用javascript动态更改源标签的src属性。

<source />尽管在FireFox中对我来说效果很好,但是在Chrome 14.0.835.202中使用标签对我来说确实很困难。(这可能是我缺乏知识,但我认为无论如何都可以使用其他解决方案。)因此,我最终仅使用了<video />标签,并在视频标签本身上设置了src属性。canPlayVideo('<mime type>')功能用于确定特定的浏览器是否可以播放输入的视频。以下内容适用于FireFox和Chrome。

顺便说一下,尽管Chrome建议使用“ webm”,但FireFox和Chrome都在使用“ ogg”格式。我之所以首先检查浏览器是否支持“ ogg”,是因为其他帖子提到FireFox首先更喜欢ogg源(即<source src="..." type="video/ogg"/>)。但是,我还没有测试(并高度怀疑)在视频标签上设置“ src”时代码中的顺序是否有任何不同。

的HTML

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

的JavaScript

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }

我已经对此进行了一段时间的研究,并且正在尝试做同样的事情,因此希望对其他人有所帮助。我一直在使用crossbrowsertesting.com,并在几乎每个人类已知的浏览器中都进行了测试。我目前拥有的解决方案适用于Opera,Chrome,Firefox 3.5 +,IE8 +,iPhone 3GS,iPhone 4,iPhone 4s,iPhone 5,iPhone 5s,iPad 1 +,Android 2.3 +,Windows Phone 8。

动态改变来源

动态更改视频非常困难,如果要Flash回退,则必须从DOM /页面中删除视频,然后重新添加它,以便Flash更新,因为Flash无法识别对Flash变量的动态更新。如果您要使用JavaScript动态更改它,我将完全删除所有<source>元素,仅用于在JavaScript中和/第一个受支持的视频类型之后canPlayType进行设置,不要忘记动态更新Flash var mp4。另外,除非您致电,否则某些浏览器不会注册您更改了源我相信您遇到的问题可以通过首先致电来解决srcbreakreturnvideo.load().load()video.pause()删除和添加视频元素可能会降低浏览器的速度,因为它会继续缓冲已删除的视频,但是有一种解决方法

跨浏览器支持

至于实际的跨浏览器部分,我也到达了Video For Everybody我已经尝试过MediaelementJS WordPress插件,事实证明它导致的问题比解决的问题多得多。我怀疑问题是由于Wordpress插件引起的,而不是实际的库引起的。如果可能的话,我正在尝试寻找没有JavaScript的东西。到目前为止,我想出的是这个简单的HTML:

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

重要说明

  • 最终把ogg放在第一位,<source>因为Mac OS Firefox在遇到MP4时首先退出尝试播放视频<source>
  • 正确的MIME类型很重要.ogv文件应该是video/ogg而不是 video/ogv
  • 如果您有高清视频,我发现高清质量OGG文件的最佳转码器是Firefogg
  • .iphone.mp4文件适用于iPhone 4+,它将播放带有H.264 Baseline 3 Video和AAC音频的MPEG-4视频。我发现该格式的最佳转码器是Handbrake,使用iPhone和iPod Touch预设可在iPhone 4+上使用,但是要使iPhone 3GS正常工作,您需要使用分辨率较低iPod预设,我将其添加为video.iphone3g.mp4
  • 将来,我们将能够media<source>元素使用属性来通过媒体查询来定位移动设备,但是现在,较早的Apple和Android设备还不够支持它。

编辑

  • 我仍在使用“所有人的视频”,但现在我已经过渡到使用FlowPlayer来控制Flash后备功能,该功能具有强大的JavaScript API,可以用来控制它。

尝试将OGG源移动到顶部。我已经注意到Firefox有时会感到困惑,并在想要播放的游戏OGG不在首位时停止播放器。

值得一试。

您可以在Jquery中执行的另一种方法。

的HTML

<video id="videoclip" controls="controls" poster="" title="Video title">
    <source id="mp4video" src="video/bigbunny.mp4" type="video/mp4"  />
</video>

<div class="list-item">
     <ul>
         <li class="item" data-video = "video/bigbunny.mp4"><a href="javascript:void(0)">Big Bunny.</a></li>
     </ul>
</div>

jQuery的

$(".list-item").find(".item").on("click", function() {
        let videoData = $(this).data("video");
        let videoSource = $("#videoclip").find("#mp4video");
        videoSource.attr("src", videoData);
        let autoplayVideo = $("#videoclip").get(0);
        autoplayVideo.load();
        autoplayVideo.play();
    });

使用JavaScript和jQuery:

<script src="js/jquery.js"></script>
...
<video id="vid" width="1280" height="720" src="v/myvideo01.mp4" controls autoplay></video>
...
function chVid(vid) {
    $("#vid").attr("src",vid);
}
...
<div onclick="chVid('v/myvideo02.mp4')">See my video #2!</div>
本文地址:http://javascript.askforanswer.com/genggaihtml5shipinbiaoqianshangdelaiyuan.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!