HTML5新增组件-音频和视频

最新推荐文章于 2024-06-12 15:33:32 发布

小可同学啊

最新推荐文章于 2024-06-12 15:33:32 发布

阅读量406

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

HTML5的新组件-video和audio 因为flash并不属于浏览器 pc端需要插件才能运行且在手机不兼容(audio除了width,height,poster 其他和video相同)

src属性引入视频音频地址 source做兼容处理
width/height 设置视频宽高 (等比缩放)
poster:设置视频播放前预览图片的地址
controls:显示或隐藏媒体用户控制界面
autoplay:媒体是否自动播放
loop:媒体是否循环播放
muted:媒体是否静音
prelode:是否预先加载数据 ({none:不预先加载,metedata:预先只加载媒体文件元数据(时常。大小),auto:优先加载})

通过js选择器获取oVideo元素属性(oAudio除了videoWidth,videoHeight,poster其他和video相同)属性如下：

videoWidth/videoHeight 视频实际尺寸(显示为0时表示视频并没有加载完成可以在window.onlode的时候获取)
poster
duration 媒体总播放时长(只读) 在window.onlode的时候获取
currentTime 媒体的播放进度(已经播放多久)
muted (true表示静音)``
volume:0.0-1.0音量相对值
controls:true表示显示
loop:true表示循环
paused:媒体是否处于暂停状态 true表示暂停(只读)
ended:是否播放完毕 true表示播放完毕(只读)
currentSrc:以字符串形式返回媒体地址(只读)->绝对路径

<!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>
    <audio controls autoplay loop>
        <source src="johann_sebastian_bach_air.mp3"/> 
        <source src="johann_sebastian_bach_air.ogg"/>
    </audio>
    <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>
   <script>
       var oVid = document.getElementsByTagName("video")[0];
       console.log(oVid.width);
       console.log(oVid.height);
       window.onload = function (){
        console.log(oVid.videoWidth);
        console.log(oVid.videoHeight);
        console.log(oVid.duration);
       }
       document.onclick = function (){
           console.log(oVid.currentTime);
        //    oVid.muted = true;
           console.log(oVid.volume);
           console.log(oVid.currentSrc);
       }
       
     
   </script>
</body>
</html>

小可同学啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增组件-音频和视频

HTML5的新组件-video和audio 因为flash并不属于浏览器 pc端需要插件才能运行且在手机不兼容(audio除了width,height,poster 其他和video相同)src属性引入视频音频地址 source做兼容处理width/height 设置视频宽高 (等比缩放)poster:设置视频播放前预览图片的地址controls:显示或隐藏媒体用户控制界面autoplay:媒体是否自动播放loop:媒体是否循环播放muted:媒体是否静音prelode:是否预先加.
复制链接

扫一扫