0

我正在使用 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 中不起作用。

这是主要文件的 zip.... http://vc4hp.net/vidtest/mediaelementjs.zip

4

1 回答 1

0

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

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

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

于 2012-06-17T02:32:56.903 回答