我正在尝试解决在浏览器中在移动设备上播放所选视频和音频剪辑列表而无需用户干预的问题。
我会生成视频和音频的网址列表。 (我将它存储在一个数组中)。
然后我想连续播放(视频和音频的URL)列表,不需要用户干预,例如,不让用户点击每个片段进行播放。
我已经在HTML 5中使用移动jquery进行了尝试。它确实在支持桌面HTML5的浏览器上运行良好,但由于在移动浏览器上禁用了自动播放功能,因此无法按照我的方式在移动设备上运行。现有代码如下。
我愿意使用任何其他解决方案,只要它播放视频和网址的列表 移动浏览器中移动设备上的Audios不断。
任何帮助将不胜感激。我真的需要解决这个问题。 谢谢。 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);
}
}
答案 0 :(得分:1)
如果您想在移动设备上使用<video>
或<audio>
元素继续播放视频/音频列表,则必须:
如果您从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>
请记住不要使用全局范围来定义这些功能 - 这里只是为了简化示例。
我已成功测试该解决方案:
它也适用于所有桌面浏览器。