如何在移动设备上播放视频和音频列表（HTML5）-Java 学习之路

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

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

1 回答

如果您想在移动设备上使用 <video> 或 <audio> 元素连续播放视频/音频列表，您必须：

只创建一个这样的元素，
开始使用用户交互进行播放（因为无法在没有用户操作的情况下在移动设备上执行媒体元素的play（）方法，例如点击/触摸事件），
然后只更改它的"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

它在所有桌面浏览器上都运行良好 .

回复于 2024-04-24T18:28:48+08:00

如何在移动设备上播放视频和音频列表（HTML5）

1 回答

相关问题