Html5 在 Safari 中更改视频失败

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 属性。然后添加对兼容编解码器的检查到changeVideo() --> IE9 中的video.canPlayType("video/mp4") （对于每种类型，最好在循环中）

为我解决了问题。后来测试了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 将不会加载该视频。您必须克隆视频，删除原始视频并将克隆的容器附加到其位置。