2

HTML でビデオ プレイリストを作成し、ビデオは再生されますが、別のビデオを選択すると、前のビデオが強調表示されたままになり、別のビデオ名をクリックするとハイライトが削除されます。http://www.evamagnus.com/OurServices.php video.js コードには、

var position = 0;
var playlist;
var video;

window.onload = function() {
    video = document.getElementById('video');
    addClickHandlers();
    video.src = "video/" + getFormatExtension();
    video.load();
    video.play();
}

function addClickHandlers() {
    var liElements = document.querySelectorAll("ul#videolist li");
    for (var i = 0; i < liElements.length; i++) {
        var li = liElements[i];
        li.onclick = handleVideoSelection;
    }
}

function handleVideoSelection(e) {
    console.log(e);
    var li = e.target;
    var src = li.getAttribute("data-src");
    var isSelected = li.getAttribute("class");
    if (isSelected == "selected") {
        if (video.paused) {
            video.play();
        }
        else if (video.ended) {
            video.load();
            video.play();
        }
        else {
            video.pause();
        }
    }
    else {
        li.setAttribute("class", "selected");
        video.src = src + getFormatExtension();
        video.load();
        video.play();
    }
}

function getFormatExtension() {
    if (video.canPlayType("video/mp4") != "") {
        return ".mp4";
    } else if (video.canPlayType("video/ogg") != "") {
        return ".ogg";
    } else if (video.canPlayType("video/webm") != "") {
        return ".webm";
    }
}

ありがとう。

4

1 に答える 1

0

jQuery を使用しているため、video.js ファイル内のすべてのコードをこれに置き換えることができるはずです...

var video = document.getElementById('video');
var ext = getFormatExtension();  // only need to get the extension once

$("ul#videolist li").click(function(e){
    video.src = e.target.getAttribute("data-src") + ext;
    video.load();
    video.play();

    // 1 - clear them all
    $("ul#videolist li").removeClass();

    // 2 - set the clicked one
    e.target.setAttribute("class", "selected");
});

function getFormatExtension() {
    if (video.canPlayType("video/mp4") != "") {
        return ".mp4";
    } else if (video.canPlayType("video/ogg") != "") {
        return ".ogg";
    } else if (video.canPlayType("video/webm") != "") {
        return ".webm";
    }
}

これは、ポインター カーソルとホバー bg を備えたボタンであることを示すのに役立つ、いくつかの CSS 拡張機能を備えたオンラインの例です。ボタンの境界線とグラデーションの CSS スタイルを追加しました。

http://jsfiddle.net/DaveAlger/AQYjY/8/

これがうまくいくことを願っています（質問を回答済みとしてマークしてください）

于 2012-06-01T01:05:02.943 に答える