如何在移动设备上播放视频和音频列表 (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. 通过用户交互开始播放（因为在没有用户操作（例如点击/触摸事件）的情况下，无法在移动设备上执行媒体元素的 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 Safari
• iPad 2 iOS 7.0.4 Safari
• 三星 Galaxy Tab 2 7.0 - GT-P3100 - Android 4.0.3 - 本机、Chrome、Firefox
• 三星 Galaxy SIII - GT-I9300 - Android 4.2.2 - 本机浏览器、Chrome、Firefox
• 诺基亚 Lumia 925 - Windows Phone 8.0 - IEMobile 10

它在所有桌面浏览器上也都能正常工作。