Question

我添加了一个带有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中运行？

由于

此致

Answer 1

将mp4节点置于其他节点之上，然后它可能会起作用。如果不起作用，请完全删除源节点并使用视频节点的src属性。然后添加对兼容编解码器的检查以更改视频（） - ＆gt; 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);
    }

Answer 2

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

在Safari中Html5更改视频失败

2 个答案: