2

我正在尝试解决在浏览器中在移动设备上播放所选视频和音频剪辑列表而无需用户干预的问题。

我生成了一个视频和音频的 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);
    }
}
4

1 回答 1

2

如果您想在移动设备上使用<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

它也适用于所有桌面浏览器。

于 2014-01-22T21:08:08.247 回答