Question

我正在使用MediaElementJS http://mediaelementjs.com/ 所以我可以在IE6 +等浏览器上播放mp4视频。

我想要它，以便视频最初不可见，然后弹出并可以隐藏，然后可能会回来，从一开始就重播。

可能的方法包括最初隐藏视频然后显示它，然后再次隐藏它......

或动态创建视频对象，然后将其删除，然后创建新的视频对象......

一个版本： http://vc4hp.net/vidtest/test5.php

iPad：好的，IE9：好的，Chrome：好的

Firefox：“显示”必须按两次且没有声音。 http://vc4hp.net/vidtest/test5f.php最初显示视频而不是隐藏（并禁用自动播放）。如果您立即播放视频（需要按“显示”），声音会起作用。如果你隐藏然后播放然后播放它，声音就不起作用了。

IE6-IE8：需要按“显示”两次...如果延迟太短，则无法播放视频或有空白屏幕有声。如果延迟足够，则视频正常播放。（我无法让它显示视频的图形，同时只需按一下“显示”）

$(document).ready(function(){
    $('#videocontainer').hide();
    $("#show").click(function () { 
        $('#videocontainer').show('slow');
        if (nativeMP4) {
            $('#player1').attr('src','comm5intro.mp4');
        }
        else {
            if (my_media.length > 0) {
                my_media[0].setSrc('comm5intro.mp4');
                my_media[0].play();
            }
        }        
    });    
    $("#hide").click(function () { 
        $('#videocontainer').hide('slow');
        if (nativeMP4) {
            $('video')[0].pause();
        }
        else {
            if (my_media.length > 0) {
                my_media[0].pause();
            }
        }        
    });        
});

由于firefox中没有声音问题，我尝试了另一种方法 - 创建和销毁视频对象：

http://vc4hp.net/vidtest/test11.php

iPad：确定（“显示”会显示视频[当然不会自动播放]，“隐藏”会使视频消失等）

IE9：首先按“显示”和“隐藏”即可。第二次按“显示”会同时播放两个视频，当您按“隐藏”

时，这些视频不会被删除

Firefox：“显示”会显示视频，“隐藏”不会执行任何操作。

Chrome：“显示”通常会产生回音 - 即使检测到原生MP4支持是为了防止其播放的第二个版本，也可能会播放两个视频。 “隐藏”会停止回声，这意味着另一个视频仍在播放。

IE6-IE8：与Firefox一样，“Show”会播放另一个视频并开始播放。 “隐藏”什么都不做。

$(document).ready(function(){
    $("#show").click(function () { 
        $('#videocontainer').append('<video id="player1" width="640" height="460" src="comm5intro.mp4" type="video/mp4" controls="controls" autoplay="true"></video>');
        var v = document.createElement('video'); 
        if (v.canPlayType && v.canPlayType('video/mp4').replace(/no/, '')) { 
            // native MP4 support
            alert('Native MP4 Support');
        } 
        else {
            $('#videocontainer video').mediaelementplayer({features: ['playpause','progress','volume']});
        }
    });    
    $("#hide").click(function () { 
        $('#videocontainer video').remove();
    });    
});

我希望其中一种或两种方法能够在尽可能多的浏览器中正常运行。

这是一个在我检查过的所有浏览器中正常播放视频的版本......

http://vc4hp.net/vidtest/test.html

虽然这些按钮在IE7和IE8中似乎不起作用。

以下是主要文件的缩写.... http://vc4hp.net/vidtest/mediaelementjs.zip

Answer 1

我找到了一个适用于我测试的所有浏览器的解决方案，它非常简单：

http://vc4hp.net/vidtest/iframe1.html

基本上它使用iframe，并且可以使用jquery动画显示和隐藏它。

跨浏览器添加/删除MediaElement JS视频

1 个答案: