H5音频和视频（video和audio）

最新推荐文章于 2024-05-31 22:11:41 发布

Friday--星期五

最新推荐文章于 2024-05-31 22:11:41 发布

阅读量1.8k

点赞数 1

分类专栏： HTML 笔记文章标签： js javascript html5 html css3

本文链接：https://blog.csdn.net/qq_45644092/article/details/105342568

版权

HTML 笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

音频和视频

1: 以下属性可以直接写在video标签中

<video controls loop muted poster="res/x.png">
       <source src="res/x.mp4">
       您的浏览器版本太低请升级
</video>

成员属性：
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
poster 在播放第一帧画面之前广告(图片)
preload 视频加载策略

auto: 预加载一定时长视频和元数
metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
none: 不加载任何内容

2 以下属性需要借助js才能使用:
对象属性:
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1）音量
playbackRate: 回放速率: 大于1快播小于1慢放
成员方法:
play() 播放视频
pause() 暂停视频播放
事件:
onplay 当视频开始播放触发事件
onpause 当视频暂停播放触发事件
例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
   #v1 {
    position: relative;
   }
   #img1 {
     position: absolute;
     top: 240px;
     left: 420px;
   }
   #ad {
     width: 856px;
     height: 487px;
     position: absolute;
     left: 7px;
     top: 7px;
   }
 </style>
</head>
<body>
 <!--<video controls loop muted poster="res/x.png" id="v1">-->
 <!--<source src="res/x.mp4">-->
 <!--您的浏览器版本太低请升级-->
 <!--</video>
 1:不使用video自带控件,自定义播放暂停按钮
   鼠标移出视频区域隐藏按钮，鼠标移入，显示按钮
 2:视频暂停就显示广告，只要播放广告隐藏
 -->
 <div id="d1">
   <video id="v1">
     <source src="res/x.mp4">
     您的浏览器版本太低请升级
   </video>
   <img src="res/x.png" id="ad">
   <img src="res/play.png" id="img1">
   <button id="btn1">播放</button>
   <button id="btn2">停止</button>
 </div>
 <script>
   var v1 = document.getElementById("v1");
   var btn1 = document.getElementById("btn1");
   var btn2 = document.getElementById("btn2");
   var img1 = document.getElementById("img1");
   var d1 = document.getElementById("d1")
   var ad = document.getElementById("ad")
   btn1.addEventListener("click", function () {
     //调整音量
     v1.volume = 0.5
     //调整速率
     v1.playbackRate = 3
     v1.play()
   })
   btn2.addEventListener("click", function () {
     v1.pause()
   })
   v1.οnplay = function () {
     console.log("播放")
   }
   v1.οnpause = function () {
     console.log("停止")
   }
   d1.οnmοuseοver = function () {
     img1.style.display = "block"
   }
   d1.οnmοuseοut = function () {
     img1.style.display = "none"
   }
   img1.addEventListener("click", function () {
     if (v1.paused) {
       v1.volume = 0.3
       v1.play()
       img1.src = "res/pause.png"
       ad.style.display = "none"
     } else {
       v1.pause()
       img1.src = "res/play.png"
       ad.style.display = "block"
     }
   })
 </script>
</body>
</html>

3:以下属性可以直接写在audio标签中
成员属性
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
preload 视频加载策略
auto: 预加载一定时长视频和元数据
metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
none: 不加载任何内容

以下属性需要借助js才能使用:
##js对象属性
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1）音量
playbackRate: 回放速率: 大于1快播小于1慢放
#js 成员方法
play() 播放音频
pause() 暂停音频播放
#js 事件
onplay 当音频开始播放触发事件
onpause 当音频暂停播放触发事件
示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<audio src="res/x.mp3" controls id="a1">
   您的浏览器版本太低请及时的升级
</audio>
<p><input type="checkbox" id="ch">123</p>
<script>
   var a1=document.getElementById("a1")
   var ch=document.getElementById("ch")
   ch.οnchange=function () {
       if(this.checked){
         a1.play();
       }else {
           a1.pause();
       }
   }
</script>
</body>
</html>

Friday--星期五

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5音频和视频（video和audio）

音频和视频1: 以下属性可以直接写在video标签中<video controls loop muted poster="res/x.png"> <source src="res/x.mp4"> 您的浏览器版本太低请升级</video>成员属性：autoplay 是否自动播放controls ...
复制链接

扫一扫