-1

これは以前に回答された可能性がありますが、何時間も検索しましたが、これを機能させるためにjqueryなしでは何も見つかりませんでした。バインド方法やその仕組みがよくわかりません。

ビデオが終了したらメッセージを表示するだけです。何らかの理由で、video.ended を使用しようとすると、true または false ではなく null が返されます。また、私の setInterval が明らかに間違っている理由もわかりません。

HTML:

<video id="videoAllUrBase" poster="images/all-ur-base-poster.png">
    <source src="video/All Your Base Are Belong To Us.mp4" />
    <source src="video/All Your Base Are Belong To Us.mp4.ogg" />
    <source src="video/All Your Base Are Belong To Us.mp4.webm" />
    <p>Your browsers does not support video</p>
</video>
<br></br>
<input id="playButton" type="button" onclick="playVideo();" value="Play" />
<input id="skipButton" type="button" onclick="skip(10);" value="Skip" />
<input id="rewButton" type="button" onclick="skip(-10);" value="Rewind" />
<p id="vidMessage">Click the Play button to start the video.</p>

JavaScript:

function playVideo(){
    var video = document.getElementById('videoAllUrBase');
    var message = document.getElementById('vidMessage');
    var button = document.getElementById('playButton');

    if(video.paused){
        video.play();
        button.value = "Pause";
        message.innerHTML = "The video is playing, click the Pause button to pause the video.";
    } else {    
        video.pause();
        button.value = "Play";
        message.innerHTML = "The video is paused, click the Play button to resume the video.";
    } 

}

function checkEnd{
    var video = document.getElementById('videoAllUrBase');
    var message = document.getElementById('vidMessage');

    if(video.ended){
        message.innerHTML = "The video has ended, click Play to restart the video.";
    }
}

setInterval(checkEnd, 1000);

function skip(value) {
    var video = document.getElementById("videoAllUrBase");
    video.currentTime += value;
}
4

1 に答える 1

1

setIntervalを使用してビデオのステータスを確認する代わりに、endedイベントをリッスンして、いつ終了するかを確認します。私が使用する変更を加えたコードは次のとおりです。

function playVideo() {
    var video = document.getElementById('videoAllUrBase');
    var message = document.getElementById('vidMessage');
    var button = document.getElementById('playButton');

    if (video.paused) {
        video.play();
        button.value = "Pause";
        message.innerHTML = "The video is playing, click the Pause button to pause the video.";
    } else {    
        video.pause();
        button.value = "Play";
        message.innerHTML = "The video is paused, click the Play button to resume the video.";
    }

    video.onended = videoEnded;
}

function videoEnded() {
    var video = document.getElementById('videoAllUrBase');
    var message = document.getElementById('vidMessage');
    message.innerHTML = "The video has ended, click Play to restart the video.";
}

function skip(value) {
    var video = document.getElementById("videoAllUrBase");
    video.currentTime += value;
}

おそらくセットアップには影響しませんがaddEventListener、イベントをバインドするために使用するとより便利になる可能性があります。

参考文献:

于 2013-04-27T18:04:49.823 に答える