Tag: html

Autoplay Video pada HTML

Latiful Hayat

bagian html, isikan:

<html>
<head>Video playlist</head>
<body>

<video autoplay id="myVideo" width="480" height="326" style="object-fit: fill;">
Browser tidak mendukung video
</video>

<script src='video/list.php'></script>

<script type="text/javascript">
var videoSource = new Array();
for(var x=0; x<=files.length; x++){
    videoSource[x]='http://localhost/antrian/video/'+files[x]+'.mp4';
}

var videoCount = videoSource.length;

document.getElementById("myVideo").setAttribute("src",videoSource[0]);

function videoPlay(videoNum)
{
    document.getElementById("myVideo").setAttribute("src",videoSource[videoNum]);
    document.getElementById("myVideo").load();
    document.getElementById("myVideo").play();
}

document.getElementById('myVideo').addEventListener('ended',myHandler,false);

var i=0;
function myHandler() {
    i++;
    if(i == (videoCount-1)){
        i = 0;
        videoPlay(i);
    }else{
        videoPlay(i);
    }
}

</body>
</html>

lalu buat file list.php pada direktory video, dengan mengisikan script berikut:

var files = <?php $out = array();
foreach (glob('*.mp4') as $filename) {
$p = pathinfo($filename);
$out[] = $p['filename'];
}
echo json_encode($out); ?>;

selanjutnya taruh file video dengan format mp4 ke direktori video