html5 video player

unixmania · 17 Mayıs 2015 - 00:02:30

Hem merak hem öğrenme amacıyla kendim bir html5 player yazdım. pc´deki video yada müzik parçalarını seçerek playlist oluşturabilir

ister seçerek ister sırayla çaldırabilirsiniz.Denemek ve öğrenmek isterseniz kodu kopyalayıp ".html" uzantılı bir dosya olarak kaydedin;

çift tıkladığınızda wep tarayıcıda açılacaktır. Ben webkit tabanlı midori´de test ettim.Sorunsuz çalıştı.Her tarayıcının html5 desteği farklı olduğundan

diğerlerinde düzgün çalışmayabilir.

Kod Seç

<!DOCTYPE html>
<html>
<head>
<title>html5 player</title>

<script>
var file,list,track,player,index
function add() {
    file = document.getElementById("file").files[0]
    list = document.getElementById("list")
    player = document.getElementById("player")
    track = document.createElement("li")
    list.appendChild(track)
    track.textContent = file.name
    track.dataset.path = URL.createObjectURL(file)
    track.value = list.childElementCount-1
    
    if(list.childElementCount==1) {
        player.src = track.dataset.path
        list.dataset.index = 0
        track.style.backgroundColor = "red"
    }
}
function next() {
    list = document.getElementById("list")
    player = document.getElementById("player")
    index = +list.dataset.index + 1
    if(index < list.childElementCount) {
        list.dataset.index = index
        player.src = list.children[index].dataset.path
        list.children[index-1].style.backgroundColor = "white"
        list.children[index].style.backgroundColor= "red"
        player.play()
    }
}
function worker() {
    player = document.getElementById("player")
    track = event.target
    var parent = track.parentElement
    parent.children[+parent.dataset.index].style.backgroundColor = "white"
    player.src = track.dataset.path
    track.style.backgroundColor = "red"
    parent.dataset.index = track.value
    player.play()
}
</script>
</head>

<body>
<video id="player" controls onended="next()"></video>
<br>
<input id="file" type="file" accept="audio/*,video/*" onchange="add()">
<ul id="list" data-index=-1 onclick="worker()"></ul>
</body>
</html>

empax · 17 Mayıs 2015 - 01:49:38

Mp4 video da açıyor bilginize

Ubuntu Türkiye

Haberler:

html5 video player

unixmania

empax