HTML5+CSS3-充实笔记0607

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

video元素与audio元素详解

属性

src属性：设置音视频文件的URL地址
autoplay属性：是否自动播放
preload属性：是否对音视频文件进行预先加载。 三个选项：none（不进行预先加载）；metadata（仅加载元数据，即音视频文件的大小、第一帧、播放列表和持续时间等）；auto（预加载全部音视频文件）
poster属性：video元素属性，当视频不可用时，向用户展现一副图片。<video src="movie.mp4" poster="replace.jpg" />
loop：是否循环播放
controls属性：是否添加浏览器自带的播放控制器，其中包括播放、暂停、声音等控件。
width/height属性：指定宽高，单位为px
muted属性：设置页面加载时，播放器是否被静音。需要静音，则添加该属性，否则，不添加

方法：在脚本中使用的控制音视频的方法

play方法

var video = document.getElementById("MyVideo");
video.play();

pause方法

video.pause();

load方法：重新加载

video.load();

canPlayType方法：用于测试浏览器是否支持指定的类型，并返回结果

video/audio事件

loadstart/progress/suspend/abort/error/emptied/stalled/play/pause/loadedmetadata/loadeddata/waiting/playing/canplay/canplaythrough/seeking/seeked/timeupdate/ended/ratechange/durationchange/volumechange
两种捕捉事件的方法：

addEventListener方法
video.addEventListener("play",function(){img.hidden = true; }, false);
第一个参数为事件名称；第二个参数为匿名函数，指执行的动作；第三个参数为false表示浏览器采用bubbling响应方式，若为true，蔡邕capture响应方式

另一种捕捉事件的方式是再JS中获取事件句柄（事件名称前面加on），并对事件句柄赋值处理函数：
var img=document.getElementById("MyImg");
function showImg(flag){
        img.hidden = flag;
}
<video id="MyVideo" src="movie.mp4" controls > </video>
这里的onPlay  和 onPause 就是事件

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：HTML5 HTML htm function Metadata

为您点赞！

来学习，为您点赞。