首页 > 其他分享 >Video标签学习

Video标签学习

时间:2023-02-19 13:11:06浏览次数:40  
标签:视频 触发 标签 学习 video Video 播放 属性

video标签

video标签诗HTML5新标签,用于定义视频,载入视频.
src:接收要播放的视频的url地址,这个url可以是本地url 也可以是远程服务器的资源地址
controls属性:给video标签加上了这个属性,就会给用户展示播放 音量等控件
autoplay属性:video标签设置该属性,就会自动播放
muted属性:video上出现了该属性,视频会被静音
loop属性 video标签出现该属性 循环播放
poster属性 设置视频播放前显示图像
width属性 设置视频的宽

video对象

video对象的创建:就是创建一个video元素

const ovideo = document.createDocument('video')

video对象的获取:就是获取video元素

const ovideo = document.getElementById(video)

属性

  • src:媒体文件的地址
  • duration:返回视频的总时长 单位为秒
  • currentTime:设置或返回视频的当前播放时间 单位也是秒
  • volume:设置或返回视频的音量, 0~1 0.1 0.5 1 最大值1 代表音量最大 最小0代表静音
  • muted:属性 是设置或返回视频是否静音 true false
  • ended 属性 视频是否播放完
  • paused 设置或返回视频视频是否暂停,true false
  • poster (封面)规定视频正在下载时显示的图像,直到用户点击播放按钮。

方法

  • play0将视频启动播放 paused true
  • pause()将视频暂停播放 paused false
    事件
  • loadstart 媒体数据开始加载触发
  • loadeddata 媒体教据加载完成
  • canplay 当浏览器判定视频可以播放了 触发
  • play 当视频启动播放触发
  • pause 当视频被暂停时触发
  • timeupdate:播放中,当前播放位置(进度)发生改变时触发
  • volumechange: 音量发生改变的时候触发
  • error 当视频加载出错时触发

标签:视频,触发,标签,学习,video,Video,播放,属性
From: https://www.cnblogs.com/gdluck/p/17134563.html

相关文章