0

MediaElementJS http://mediaelementjs.com/を使用し ているので、IE6+などのブラウザーでmp4ビデオをストリーミングできます。

ビデオが最初は表示されないようにし、次にポップアップして非表示にし、場合によっては最初から再生して戻ってくるようにします。

考えられるアプローチには、最初にビデオを非表示にしてから表示し、次に再び非表示にすることが含まれます...

または、ビデオオブジェクトを動的に作成してから削除してから、新しいビデオオブジェクトを作成します。

1つのバージョン：http： //vc4hp.net/vidtest/test5.php

iPad：わかりました、IE9：わかりました、Chrome：わかりました

Firefox：「表示」を2回押す必要があり、音が出ません。http://vc4hp.net/vidtest/test5f.phpビデオが非表示ではなく最初に表示されます（自動再生が無効になります）。ビデオをすぐに再生すると（[表示]を押す必要があります）、サウンドは機能します。非表示にしてから表示してから再生すると、サウンドが機能しません。

IE6-IE8：「表示」を2回押す必要があります...遅延が短すぎる場合は、ビデオが再生されないか、音声付きの空白の画面が表示されます。遅延が十分であれば、ビデオは正常に再生されます。（ビデオのグラフィックを表示させることはできませんでしたが、同時に「表示」を1回押すだけで済みます）

$(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：「表示」と「非表示」の最初のプレスが機能します。「表示」を2回押すと、2つの動画が同時に再生され、「非表示」を押してもこれらは削除されません。

Firefox：「表示」はビデオを表示しますが「非表示」は何もしません。

Chrome：「表示」は通常エコーを引き起こします-ネイティブMP4サポートの検出は、2番目のバージョンの再生を防ぐことを目的としていますが、2つのビデオが再生されている可能性があります。「非表示」はエコーを停止し、他のビデオがまだ再生中であることを意味します。

IE6-IE8：Firefoxと同様に、「表示」を使用すると、別のビデオが表示され、再生が開始されます。「非表示」は何もしません。

$(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 に答える