2

ユーザーの介入なしにブラウザでモバイル デバイスの選択したビデオとオーディオ クリップのリストを再生する問題を解決しようとしています。

ビデオとオーディオの URL のリストを生成します。(配列に格納します)。

次に、(ビデオとオーディオの URL の) リストをユーザーの介入なしにノンストップで連続的に再生したいと考えています。たとえば、ユーザーがすべてのクリップをクリックして再生する必要はありません。

モバイルjqueryを使用してHTML 5で試しました。実際、デスクトップの HTML5 対応ブラウザでは問題なく動作しますが、モバイル ブラウザでは自動再生機能が無効になっているため、モバイル デバイスでは希望どおりに動作しません。以下に示す既存のコード。

モバイルブラウザでモバイルデバイス上のビデオとオーディオの URL のリストを継続的に再生する限り、他のソリューションを使用しても構わないと思っています。

どんな助けでも大歓迎です。私は本当にこの問題を解決する必要があります。ありがとう。TJ

function NextFrag(){

if (index < URLArray.length)
{
   if(index == 0 )
   {
        $("#VideoContainer").html('<video  id="video1" controls ="controls" > "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );                     
        index++;
        $("#video1").bind( "ended", NextFrag);
    }
    else
    {
     $("#VideoContainer").html('<video  id="video1" controls autoplay > "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
     index++;
     $("#video1").bind( "ended", NextFrag);
    }
}
4

1 に答える 1

2

モバイル デバイスで<video>または要素を使用してビデオ/オーディオのリストを連続的に再生する場合は、次のことを行う必要があります。<audio>

  1. そのような要素を 1 つだけ作成し、
  2. ユーザー インタラクションで再生を開始する (モバイル デバイスでは、クリック/タッチ イベントなどのユーザー アクションなしではメディア要素の play() メソッドを実行できないため)。
  3. そして、その「src」属性のみを変更します

そのメディア要素を DOM から削除すると、ユーザー アクション イベントの「スコープ」が失われ、次のビデオを開始するには別のユーザー アクション (クリック/タッチ) が必要になります。

jQuery を使用したこのような連続ループ再生リストの最も単純な実装:

<div id="player"></div>
<button id="playBtn">Play</button>

<script>

var videos = [
    'video1.mp4',
    'video2.mp4',
    'video3.mp4'
    ],
    mediaElement,        
    container,
    playBtn,
    currentItem = 0;

function createVideo(){

    mediaElement = $('<video/>').attr({
        id: 'vid', 
        preload: "none"
    }).prop({
        controls: true
    }).css({
        width: '480px',
        height: '360px',
        position: 'relative'
    });

    // listen to the events
    mediaElement.on('loadstart', playVideo);
    mediaElement.on('ended', endedListener);

    // add <video> element to the DOM
    container.append(mediaElement);
}

function applySrc(src){
    mediaElement.attr('src', src); // just change the 'src' attribute
    mediaElement[0].load(); // important on iOS
}

function changeVideo(itemId){
    applySrc(videos[itemId]);
}

function removeVideo(){
    if(mediaElement){
        mediaElement.remove();
    }
}

function playVideo(){
    mediaElement[0].play();
}

function endedListener(evt){
    currentItem >= videos.length - 1 ? currentItem = 0 : currentItem++;
    changeVideo(currentItem);
}

$(document).ready(function() {
    playBtn = $('#playBtn');
    container = $('#player');
    playBtn.on('click', function(){
       removeVideo();
       createVideo();
       applySrc(videos[currentItem]);
    });
});
</script>

その関数を定義するためにグローバル スコープを使用しないことを忘れないでください。ここでは、例を単純化するためです。

そのソリューションのテストに成功しました:

  • iPhone 5 iOS 7.0.4 サファリ
  • iPad 2 iOS 7.0.4 サファリ
  • Samsung Galaxy Tab 2 7.0 - GT-P3100 - Android 4.0.3 - ネイティブ、Chrome、Firefox
  • Samsung Galaxy SIII - GT-I9300 - Android 4.2.2 - ネイティブ ブラウザ、Chrome、Firefox
  • Nokia Lumia 925 - Windows Phone 8.0 - IEMobile 10

すべてのデスクトップ ブラウザでも問題なく動作します。

于 2014-01-22T21:08:08.247 に答える