音视频元素的方法和事件

最新推荐文章于 2023-12-11 08:53:02 发布

小可同学啊

最新推荐文章于 2023-12-11 08:53:02 发布

阅读量160

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_55041880/article/details/118047650

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文介绍了HTML5中用于视频和音频播放的oVid和oAud元素，及其常用方法如play()和pause()，并展示了如何通过JavaScript监听和响应play、pause和ended事件。示例代码演示了如何实现视频播放和暂停的按钮控制。

摘要由CSDN通过智能技术生成

oVid元素和oAud元素方法：

play() 媒体播放
pause() 媒体暂停
load() 重新加载媒体(如你修改了source的Src地址若不是用load方法重新加载仍显示之前的视频)
oVid元素和oAud元素事件：
play: 在视频、音频播放前触发
ended: 在视频，音频播放结束时触发
pause: 在视频，音频暂停时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video controls width="500" height="200" poster="https://t7.baidu.com/it/u=2340400811,4174965252&fm=193&f=GIF" >
        <source src="./Intermission-Walk-in.ogv"/> 
        <source src="./Intermission-Walk-in_512kb.mp4"/>
    </video>
    <button>播放</button>
   <script>
       var oVid = document.getElementsByTagName("video")[0];
       var oBtn = document.getElementsByTagName("button")[0];
       var bOn = true;
       oBtn.onclick = function (){
           bOn ? oVid.play() : oVid.pause();
           bOn = !bOn;
       }
       oVid.onplay = function (){
           console.log("播放");
       }
       oVid.onpause = function (){
           console.log("暂停")
       }
       oVid.onended = function (){
           console.log("结束")
       }
   </script>
</body>
</html>

小可同学啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
音视频元素的方法和事件

oVid元素和oAud元素方法：play() 媒体播放pause() 媒体暂停load() 重新加载媒体(如你修改了source的Src地址若不是用load方法重新加载仍显示之前的视频)oVid元素和oAud元素事件：play: 在视频、音频播放前触发ended: 在视频，音频播放结束时触发pause: 在视频，音频暂停时触发<!DOCTYPE html><html lang="en"><head> <meta charset.
复制链接

扫一扫