day-3-视频音频标签

最新推荐文章于 2022-05-24 20:43:38 发布

铭心NTeen

最新推荐文章于 2022-05-24 20:43:38 发布

阅读量107

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_25238675/article/details/103209160

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

视频音频标签

video	可以在页面中插入一个视频
audio	可以在页面中插入一个音频

css属性
controls	显示视频的所有控件
autoplay	让视频自动播放高版本浏览器需要加上muted属性
poster	给视频添加海报（广告）
loop	让视频循环播放

示例：

<video
        src="video/1.mp4"
        width="500"
        controls
></video>

视频/音频的方法

play 让视频播放 pause 让视频暂停 load 重载视频

视频/音频的属性
duration	获取视频的周期
currentTime	获取/设置视频的播放时间
playbackRate	获取/设置视频的播放速度
volume	获取视频/音频播放的当前音

视频/音频上的事件
oncanplay	当视频/音频加载好会触发回调函数
onplay	从暂停切换到播放状态时会触发
onpause	从播放切换到暂停状态时会触发
ontimeupdate	当视频的播放时间变化时会触发
onended	当视频播放完成时会触发

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video
        src="1.mp4"
        width="500"
        controls
></video>

<button id="btn01">play</button>
<button id="btn02">pause</button>
<button id="btn03">load</button>
<script>
  

    var video = document.querySelector('video')

    btn01.onclick = function(){
        video.play()
    }

    btn02.onclick = function(){
        video.pause()
    }

    btn03.onclick = function(){
        video.load()
    }

    // video.oncanplay = function(){
    //     console.log('canplay');
    // }

    // video.onplay = function(){
    //     console.log('play');
    // }
    //
    // video.onpause = function(){
    //     console.log('pause');
    // }

    // video.ontimeupdate = function(){
    //     console.log(video.currentTime)
    // }
    video.onended = function () {
        console.log('播放完成');
    }

</script>
</body>
</html>

铭心NTeen

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day-3-视频音频标签

视频音频标签video 可以在页面中插入一个视频 audio 可以在页面中插入一个音频 css属性 controls 显示视频的所有控件 autoplay 让视频自动播放高版本浏览器需要加上muted属性 poster 给视频添加海报（广告） loop 让视频循环播放示例：<video src...
复制链接

扫一扫

专栏目录