JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理
本文最后更新于 268 天前,其中的信息可能已经有所发展或是发生改变。

在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束,下面来看下如何通过JavaScript来监听获取视频的这几种状态。
(1)html页面视频标签大体如下

<video id="video" controls="controls">
    <source type="video/mp4" src="mi.mp4">
</video>

(2)视频加载后获取视频的长度

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('loadedmetadata', function () { //加载数据
        //视频的总长度
        console.log(elevideo.duration);
    });
</script>

(3)视频开始播放

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('play', function () { //播放开始执行的函数
        console.log("开始播放");
    });
</script>

(4) 视频正在播放中

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('playing', function () { //播放中
       console.log("播放中");
    });
</script>

(5)视频加载中

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('waiting', function () { //加载
        console.log("加载中");
    });
</script>

(6)视频暂停播放

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('pause', function () { //暂停开始执行的函数
        console.log("暂停播放");
    });
</script>

(7)视频结束播放

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener('ended', function () { //结束
        console.log("播放结束");
    }, false);
</script>

(8)视频播放进度时间

<script>
console.log("视频的播放进度", elevideo.currentTime)
</script>

Demo:https://gitcdn.xiaodongxier.com/pages/20230530095529.html

标题:JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理
地址:https://xiaodongxier.com/2036.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇