파일에서 여러 개의 동영상 재생 및 반복하기 (HTML)

동영상이 계속 반복되지 않는 것 같습니다. 지금까지 하나의 비디오 만 재생 중입니다. 파일에서 여러 개의 동영상 재생 및 반복하기 (HTML)

<body onload="onload();"> 
<h1>Video Autoplay</h1> 
<div id="message"></div> 
<input type="file" id="ctrl" webkitdirectory directory multiple/> 
<video id="ctrl" onended="onVideoEnded();" autoplay loop></video> 
<script> 

    var playSelectedFile = function (event) { 
     var file = this.files[0] 
     var type = file.type 
     var videoNode = document.querySelector('video') 
     var fileURL = URL.createObjectURL(file) 
     videoNode.src = fileURL 
     videoNode.play();  
    } 

     var inputNode = document.querySelector('input') 
     inputNode.addEventListener('change', playSelectedFile) 

</script>

나는 루프를 사용하여 시도, 그것은 작동하지 않습니다. 감사합니다

출처

2016-11-17 Chloven Tan

바로 생각 ... 당신이 코드가 필요합니다 다음 비디오 소스를로드 할 onEnded 이벤트의 리스너 – Offbeatmammal

어떤 코드가됩니까? 두 번째 청취자가 필요합니까? @Offbeatmammal –

http://stackoverflow.com/questions/2551859/html-5-video-or-audio-playlist – Offbeatmammal

는 라운드 루프 것이다 마지막에 도달하면 재생이 얻을이 코드가 순서대로 선택한 디렉터에서 동영상의 배열의 단계별 것이다

이

<html> 
<head> 

<script> 
var videos = new Array(); //("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4"); 
var currentVideo = 0; 

function nextVideo() { 
    // get the element 
    videoPlayer = document.getElementById("play-video") 
    // remove the event listener, if there is one 
    videoPlayer.removeEventListener('ended',nextVideo,false); 

    // update the source with the currentVideo from the videos array 
    videoPlayer.src = videos[currentVideo]; 
    // play the video 
    videoPlayer.play() 

    // increment the currentVideo, looping at the end of the array 
    currentVideo = (currentVideo + 1) % videos.length 

    // add an event listener so when the video ends it will call the nextVideo function again 
    videoPlayer.addEventListener('ended', nextVideo,false); 
} 

function ooops() { 
    console.log("Error: " + document.getElementById("play-video").error.code) 
} 
</script> 
</head> 
<body> 

<input type="file" id="filepicker" name="fileList" webkitdirectory directory multiple /> 

<div class="video-player"> 
    <video id="play-video" width="588" height="318" controls autobuffer muted> 
    Your browser does not support the video tag. 
    </video> <!--end video container --> 
</div> 

<script> 
// add error handler for the video element 
document.getElementById("play-video").addEventListener('error', ooops,false); 

// add change event to pick up selected files 
document.getElementById("filepicker").addEventListener("change", function(event) { 

    var files = event.target.files; 
    // loop through files 
    for (i=0; i<files.length; i++) { 
    // select the filename for any videos 
    if (files[i].type == "video/mp4") { 
     // add the filename to the array of videos 
     videos.push(files[i].name); // note: if you need the path, work from webkitRelativePath; 
    } 
    }; 
    // once videos are loaded initialize and play the first one 
    nextVideo(); 
    }, false); 

</script> 

</body> 
</html>

출처

2016-11-19 00:25:47 Offbeatmammal

답변 해 주셔서 감사합니다. 어쨌든 코드에서 배열로 webkitdirectory를 사용할 수 있습니까? @offbeatmammal –

예, 'webkitdirectory'는 파일 배열을 제공합니다 (이 예제는 https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory를 참조하십시오). 재생할 파일을 얻는 경로 (원본과 비슷 함) – Offbeatmammal

위의 코드에 어떻게 맞습니까? target.files를 사용해 보았는데 작동하지 않았습니다. @Offbeatmammal –

파일에서 여러 개의 동영상 재생 및 반복하기 (HTML)

답변

관련 문제