无法在 IE9 上通过 JavaScript 更改视频标签的来源

发布于 2024-11-09 12:20:50 字数 1096 浏览 1 评论 0原文

您好，我正在开发 HTML5 视频播放器，目前我遇到了一个奇怪的错误。我可以在 IE 和 Chrome 中正常播放视频，但是，当我想通过 java 脚本动态更改视频源时，我遇到了麻烦。 Chrome 更改视频源没有任何问题，但 IE9 保持以前的视频完整，只是没有更改。 Safari 也运行良好。

我确实尝试在 stackoverflow 中搜索，发现了很多相同的问题，并尝试了几乎所有答案，但 IE 似乎有自己的工作风格，或者我遗漏了一些东西。只是为了确保我切换文件以验证两个视频都可以在 IE9 中工作，并且都可以，但是当我尝试通过 JavaScript 操作它们时它们只是不播放。下面是示例代码，

<div class="video">
     <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" >
        <source src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />             </div>                
   </div>

而 javascript 也很简单

function myNewSrc() {

    var myVideo = document.getElementById('example_video_2');
  // myVideo.src = "";
   myVideo.src = "120235_VIDHIGH.mov";
    //alert(myVideo.src);
    myVideo.load();

    myVideo.play();
    //changeMovieSource('song.mp4','something');
    //$("#example_video_2 > source").attr("src", "120235_VIDHIGH.mov");
    //alert($("#example_video_2 > source").attr("src"));    
    }

原文

Hi I am working on HTML5 Video Player, Currently i am experiencing a wierd error. I am able to play the video fine in IE and Chrome fine, however, when i dynamically want to change the video source via java script, i ran into troubles. Chrome change the video source without any problem however IE9 keep the previous video intect and just does not change. Safari also works fine.

I did try to search in stackoverflow and found quite a few same questions and tried almost every answer but it seems IE has its own style of working or i am missing something.
Just to be sure i switch the files in order to verify both videos are working in IE9 and both do, however they just dont play when i try to manipulate them via javascript. a sample code is below

<div class="video">
     <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" >
        <source src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />             </div>                
   </div>

while javascript is as simple

function myNewSrc() {

    var myVideo = document.getElementById('example_video_2');
  // myVideo.src = "";
   myVideo.src = "120235_VIDHIGH.mov";
    //alert(myVideo.src);
    myVideo.load();

    myVideo.play();
    //changeMovieSource('song.mp4','something');
    //$("#example_video_2 > source").attr("src", "120235_VIDHIGH.mov");
    //alert($("#example_video_2 > source").attr("src"));    
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一城柳絮吹成雪 2024-11-16 12:20:50

删除整个视频 html 元素并创建一个新元素，而不是仅替换其属性之一。

回复收藏 0 原文

一个人的旅程 2024-11-16 12:20:50

与 TweeZz 相比，我建议不要删除整个视频元素，因为这会破坏 iOS（和 Android）上的代码。

相反，不要将源元素放入 html 中，而是通过 JS 添加它们。 IE9 不允许这样做，您可以再次捕获并编辑视频元素本身的 src 属性，如我在此处所示：
视频标记在 IE 9 中无法

作为快捷方式使用，这里是我发布的代码：

$('video').append('<source src="' + pathMp4 + '" type="video/mp4"><source src="' + pathWebm + '" type="video/webm">');
if(!$('video').children('source').length) { // set src&type attribute for ie9/android3.1 because it does not add the source child-elements
    $('video').attr('src', pathMp4 ).attr('type','video/mp4');
}

背景：当您在 html 中设置源元素时，IE9 会优先考虑此信息。稍后，当您使用 .src() 函数时，仅视频元素的 src 属性将被覆盖，但由于 IE9 对源元素的优先级，这并不重要。

-->绝对是 IE9 中的错误

更新：请查看此帖子以获得更好的解决方案： 视频标签在 IE 9 中不起作用

in contrast to TweeZz I advice against removing the entire video-element as this breaks the code on iOS (and Android).

instead do not put the source elements in your html but instead add them via JS. IE9 does not allow this which again you can catch and then edit the src-attribute of the video element itself, as I showed here:
Video tag not working in IE 9

as a shortcut, here the code I posted there:

$('video').append('<source src="' + pathMp4 + '" type="video/mp4"><source src="' + pathWebm + '" type="video/webm">');
if(!$('video').children('source').length) { // set src&type attribute for ie9/android3.1 because it does not add the source child-elements
    $('video').attr('src', pathMp4 ).attr('type','video/mp4');
}

Background: when you set source-elements in your html, IE9 prioritizes this information. Later, when you use the .src() function only the src-attribute of the video-element will be overwritten but due to IE9's prioritization of the source-element this won't matter.

--> definitely a bug in IE9

UPDATE: please check this post for a better solution: Video tag not working in IE 9

回复收藏 0 原文

雨的味道风的声音 2024-11-16 12:20:50

仅供参考：您可以通过不使用元素而是使用 src 属性来完成此工作：

就变成了
<视频 id="example_video_2" class="video-js" width="640" height="264"controls="controls" preload="auto" src="song.mp4" type='video/ mp4； codecs="avc1.42E01E, mp4a.40.2"'>