Safari中的HTML5更改视频失败答案

【问题标题】：Html5 changing video fail in SafariSafari中的HTML5更改视频失败
【发布时间】：2012-02-15 14:55:01
【问题描述】：

我包含了一个带有 html5 的视频，并且我有一个可以更改视频的菜单。

该菜单在 Firefox、Opera 和 Chrome 中运行良好，但在 Safari 中则不行。

我有这个 html 代码：

<div id="tele">
    <video id="v" width="254" height="204">
     <source id="ogg" src="/media/joies.ogv" type="video/ogg" /> 
     <source id="mp4" src="/media/joies.mp4" type="video/mp4" />
     <source id="webm" src="/media/joies.webm" type="video/webm" /> 
     <object id="flash" type="application/x-shockwave-flash"
        data="player.swf?file=joies.mp4">
        <param id="flash2" name="movie" value="player.swf?file=joies.mp4" />
    </object> </video>


</div>

<li><a href="#" class="activo"
onClick="changeVideo('/media/joies.ogv','/media/joies.mp4','/media/joies.webm','player.swf?file=joies.mp4','player.swf?file=joies.mp4')">1</a>

还有这个 Javascript：

function changeVideo(v,x,w,y,z) {

    document.getElementById("ogg").src=v;
    document.getElementById("mp4").src=x;
    document.getElementById("flash").data=y;
    document.getElementById("flash2").value=z;
    document.getElementById("webm").src=w;
    var video = document.getElementById('v');
    video.load();
    video.play();
    }

访问网页：http://81.35.152.41:8888/index.php/ca/static/zapping#

为什么更改视频的菜单在 Safari 中不运行？

谢谢

问候

【问题讨论】：

标签： javascript html video safari

【解决方案1】：

将 mp4 节点放在其他节点之上，然后它可能会起作用。如果这不起作用，请完全删除源节点并使用视频节点的src 属性。然后在 changeVideo() 中添加对兼容编解码器的检查 --> video.canPlayType("video/mp4") （对于每种类型，最好循环使用）

在 IE9 中为我解决了问题。后来测试了Safari，所以不知道它是否有同样的问题。

我使用这个函数进行源码测试：

    var VIDEO = document.getElementById("myVideo");
        function listSource(source,sources) {
            var type,
                ext = source.split('.').pop();
            switch(ext) {
                case "mp4":
                case "m4v": 
                    ext = "mp4";
                    type = "video/mp4";
                break;
                case "webm":
                    type = "video/webm";
                break;
                case "ogv":
                    type = "video/ogg";
                break;
                default:
                    console.log('invalid file extension: '+source);
                    return sources;
            }
            if( !VIDEO.canPlayType(type) ) {
                return sources; // only add video to list if the current browser can actually play it
            }
            sources.push({ src: source, type: type });
            return sources;
        }


    var sources_ok = [];
    var sources = ["http://domain.com/test.mp4", "http://domain.com/test.webm", "http://domain.com/test.ogv"]; // example

    for(var i=0,maxi=sources.length;i<maxi;i++) {
        sources_ok = listSource(sources[i],sources_ok);
    }

【讨论】：

我已经测试过放置 mp4 节点，但在 Safari 中不起作用。拜托，你能举个例子说明我如何循环检查兼容的编解码器吗？谢谢。
我证明只放了 mp4 视频，当我更改视频时不运行。它确实认为我的问题不是通过所有格式...

【解决方案2】：

如果您在视频已加载后更改其来源，Safari 将不会加载该视频。您必须克隆视频，删除原始视频并将克隆的容器附加到其位置。

【讨论】：