バッファリングで複数のビデオオブジェクトを連続して再生する方法

node.js,javascript & HTML5を使用して参照プレーヤーアプリケーションを開発しています。私は正常に1つのビデオをロードするプレーヤー&はそこから診断データを生成します。私が目指しているのは、ビデオをロードするプレーヤーを生成することです。&は、現在のビデオが終了する10秒前に次のビデオのバッファリングを開始します。私は別のビデオオブジェクトを生成することができるビデオタグを複製しようとしましたが、それを既存のものの横に表示します。どのようにこれを達成するためにいくつかのアドバイスを提供することができますしてください。前もって感謝します。バッファリングで複数のビデオオブジェクトを連続して再生する方法

HTML5：

<div id="player" class="video"> <video width=1280 height=720 autoplay data-dashjs-player controls id="video" src="{{{ src }}}"></video> // main video object that takes the src variable </div> 
<script type="text/javascript"> 
// media events 
var server_log, server_glob, videoArray = [{ 
    "MediaState": [] 
}]; 
// joins the media events into a 'glob' that can be sent every few seconds 
server_glob = function(t, v) { 
    console.log(t, v); 
    videoArray[0]["MediaState"][t] = v; 
} 
server_log = function() { 
    var out = ""; 
    // Serialize videoArray 
    for (var i = 0; i < Object.values(videoArray[0]["MediaState"]).length; i++) { 
     var key = Object.keys(videoArray[0]["MediaState"])[i]; 
     var value = JSON.stringify(videoArray[0]["MediaState"][key]); 
     out += key + "=" + value + "&"; 
    } 
    // send a xhr/ajax POST request with the serialized media events 
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("POST", "/tel", true); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // this is my favourite format of POST request, looks alot like JSON 
    xhttp.send(out); 
} 
</script>

出典

2017-03-21 T.Doe

HTMLビデオの 'ended'イベントが発生したときに新しいvideo.srcをロードするか、それはあらかじめバッファリングされません。代わりに、現在のビデオの長さを取得することであり、長さ10秒で、隠されているが、プリロードがautoに設定された新しいビデオ要素をロードし、現在の要素の終了した火災がそれらをスワップすると） – Offbeatmammal

@Offbeatmammalすごくいいね！これを説明するコード例がありますか？ –

どのオプション？どちらもかなりシンプルです...私は今日後で一緒に何かをノックすることができるでしょう。あなたがXHRを介してビデオ全体を読み込むようなことをしない限り、おそらく100％シームレスではないでしょうが、それは新しい虫の缶を開きます！ – Offbeatmammal

この意志サイクル順にビデオの数（あなたがハードコーディングまたはインスタンスのためのAJAX呼び出しを介して、配列にあなたが好きなようにロードすることができます）から。ビデオの終わりには、次の場所に移動し、配列の周りをループし続けます。

これは、すべてのネイティブJSがそう限り、あなたは<video>要素のID知っているように、あなたのnode.js/dashjsセットアップに適用可能であるべきであるのです。

いつもの好みは

は、私はあなたがどのように質問より確認されませんでした.... <head>に処理ロジックをダンプし、できるだけ身体にわずかに保つことであるが、他の構成で動作するはずですあなたはそれがキャッチオールエラーハンドラのために使用されるのと同じフォーマットに従うことができるはずですので、私は、< video>オブジェクト上 addEventListenterを想定していますサーバーに報告するメディアイベントを...引く

<head> 
.... 
<script> 
var videos = new Array("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4"); 
var currentVideo = 0; 

function nextVideo() { 
    // get the element 
    videoPlayer = document.getElementById("video") 
    // remove the event listener, if there is one 
    videoPlayer.removeEventListener('ended',nextVideo,false); 

    // update the source with the currentVideo from the videos array 
    videoPlayer.src = videos[currentVideo]; 
    // play the video 
    videoPlayer.play() 

    // increment the currentVideo, looping at the end of the array 
    currentVideo = (currentVideo + 1) % videos.length 

    // add an event listener so when the video ends it will call the nextVideo function again 
    videoPlayer.addEventListener('ended', nextVideo,false); 
} 

function ooops() { 
    console.log("Error: " + document.getElementById("video").error.code) 
} 
</script> 
</head> 

<body> 

<div id="player" class="video"> 
    <video id="video" width="588" height="318" controls autobuffer muted> 
    Your browser does not support the video tag. 
    </video> <!--end video container --> 
</div> 

<script> 
// add error handler for the video element, just to catch any other issues 
document.getElementById("video").addEventListener('error', ooops,false); 

// initialize and play the first video 
nextVideo(); 

</script>

出典

2017-03-21 18:25:37 Offbeatmammal

これは素晴らしいですね！論理的には健全だと思われますが、残念ながら動作しません。 "Video.mp4"を自分のデスクトップに置いたビデオのパス名に置き換えてコードをそのままコピーしましたが、残念ながら何も起こりません。別の動画が順番に再生されません。私が間違っていることはありますか？ –

ブラウザのコンソールログやネットワークツールにエラーがありますか？配列のビデオを既知の良いソース（http://html5demos.com/assets/dizzy.mp4など）で置き換えることはできますか？ http：//（その場合はデスクトップを見ることができます）またはfile：//？というWebページを開いていますか？ – Offbeatmammal

私は間違っていた！完璧に動作しています！ありがとうございました！！ –

バッファリングで複数のビデオオブジェクトを連続して再生する方法

答えて

関連する問題