12

その方法を使用してビデオを一時停止していpause()ます..問題は、オーディオが再生され続けることです...FirefoxのJavascriptコンソールからも一時停止しようとしました...何も起こりません。ビデオは.ogg形式であり、Chromeでも再生されません（サポートされていないと思うため）。私はAmazonS3でビデオをホストしましたが、完全にストリーミングされています。要素を動的に作成し、JSONリクエストからその情報を読み込みます。ここにいくつかのコードがあります：

function showVideo() {
        var video = videodata;

        var videobox = $('#videobox').first();
        var videoplayer = document.getElementById('videoplayer');

        if (video.Enabled) {
            if ((videoplayer != null && videoplayer.currentSrc != video.Location) || videoplayer == null) {
                console.log('Creating video elem');
                videobox.empty();
                videobox.append('<video id="videoplayer" preload="auto" src="' +
                  video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />');
                videobox.show();
            }
        } else {
            if (videoplayer != null) {
                videoplayer.pause();
                console.log('Pausing video...');
            }
            console.log('Deleting video elem');
            videobox.hide();
            videobox.empty();
        }
    }

以前にも同様の質問を投稿しましたが、現在は他のブラウザを使用しているので、新しい質問を作成する必要があると思いました。

これが動作するコードです（ユーザーheffに感謝します！）

function showVideo() {
    var video = videodata;

    var videobox = $('#videobox').first();
    var videoplayer = document.getElementById('videoplayer');

    if (video.Enabled) {
        if ((videoplayer.src != video.Location) || videoplayer.src == '') {
            console.log('Playing video: ' + video.Location);
            videoplayer.src = video.Location;
            videoplayer.load();
            videoplayer.play();
            videobox.show();
        }
    } else {
        if (videoplayer.src != '') {
            console.log('Pausing video...');
            videoplayer.pause();
            videoplayer.src = '';
            videobox.hide();
        }
    }
}
4

2 に答える 2

10

私は本当に素晴らしいコーダーで解決された同様の問題を抱えていました。この投稿をチェックしてください。それは非常に役立つかもしれません。HTML5ビデオコントロールが機能しない

html属性を使用している場合：

<video id="yourvideoID" poster="Pic.jpg" loop autoplay controls width="100%">
<source src="//example.website/InnovoThermometer.mp4" type="video/mp4">        
</video>

自動再生を削除します。

次に、jqueryを使用して、代わりに自動再生を使用します。

$(document).ready(function() { $("#bigvid3").get(0).play(); });

ソースに関しては、複数の場所があります 。JQuery.append（）を使用してhtml5ビデオを2回再生（オーディオを2倍）

と

jQueryを使用してDomLoadでHTML5ビデオを自動再生する

于 2016-03-16T19:04:29.527 に答える
5

私の推測では、showVideoはなんらかの方法で2回呼び出され、2つのコピーが作成され、一方はもう一方の一時停止を呼び出した後も再生を続けます。

あなたのコードでは、videoplayer varは、後でappendで作成したビデオタグを参照しません。以前にそのIDを持っていたものを指します。これは、ボックスを空にすると削除されると想定していますが、メモリに残っている可能性があります。 （そしてサウンドを再生し続けます）。

私の推測では、どちらの方法でも、ボックスを空にしてタグを再構築するよりも、ビデオ要素のAPIを使用してソースやその他のパラメーターを設定する方がよいでしょう。

videoplayer.src = video.Location;
videoplayer.autoplay = true;
// etc.

また、100％は幅/高さ属性の有効な値ではありません。CSSを使用して、ビデオをストレッチして領域を埋める必要があります。

于 2012-08-08T00:50:07.193 に答える