Как воспроизвести Список видео и аудио на мобильных устройствах (HTML5)

Question

Я пытаюсь решить проблему воспроизведения списка избранных видео и аудиозаписей на мобильных устройствах в браузере без вмешательства пользователя.

Я создаю список URL-адресов видео и аудио. (Я храню его в массиве).

Затем я хочу воспроизводить список (URL-адресов видео и аудио) непрерывно, без остановки, без вмешательства пользователя, например, без привлечения пользователя, чтобы щелкнуть каждый клип для воспроизведения.

Я пробовал в HTML 5 с мобильным jquery. Это действительно хорошо работает на настольном браузере с поддержкой 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); 
    } 
} 

Answer 1

Если вы хотите, чтобы постоянно играть список видео/аудио с помощью <video> или <audio> элемента на мобильных устройствах вы должны:

1. создать только один такой элемент,
2. начала игры это связано с взаимодействием пользователя (потому что невозможно реализовать метод воспроизведения() медиа-элемента на мобильных устройствах без участия пользователя, например, событие click/touch),
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 Safari
• IPad 2 IOS 7.0.4 Safari
• 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

Он отлично работает на всех настольных браузерах.