HTML视频暂停、播放和删除类

HTML Video pause, play and remove class

本文关键字：删除 播放 视频 暂停 HTML      更新时间：2023-09-26

我试图创建一个广告横幅，当页面加载时播放广告横幅。广告横幅还具有播放和暂停按钮功能，即当您单击播放/暂停功能时，视频会播放和暂停。一旦视频播放完毕，<div class="vid-banner"></div>就会改变类别并替换为图像。我在Jquery不是最棒的，下面的链接是我前进方向的一小段。

点击此处

$("#play-pause-btn").click, '#video-wall__content'(function(e){
    var video = $(this).get(0);
    if (video.pause === false){
        video.pause();
    } else {
        video.play();
    }
    return false;
});

})；

p.S如果有人知道如何使用angular JS执行此操作，请向我提供一个示例

看看这个小提琴

我看到你在这里遇到的问题是视频事件。

我使用了html5视频属性paused（pause是暂停视频的方法）来触发按钮点击。

没有必要在上添加onclick属性

<a id="play-pause-btn" onClick="playPause">click me</a>

因为您已经使用其id属性触发了点击事件

完整JS:

var video = document.getElementById("video-wall__content"); 
$("#play-pause-btn").click(function(e){
    if(video.paused==true){
        console.log('video paused');
        //display banner on video stopping
        video.play();
    }else{
        //hide banner
        console.log('video played');
        video.pause();
    }
});
video.addEventListener("ended", function(){
    console.log('video completed');
    //display banner on video ending
});

查看媒体事件参考列表以充分利用视频事件

相关文章：