码迷,mamicode.com
首页 > 其他好文 > 详细

H5新特性之video audio

时间:2017-11-21 22:03:08      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:src   style   eve   func   自动播放   ror   ide   time   poster   

1.标签

<video src="~~~" autoplay loop controls poster="~~~.jpg">
    你的浏览器不支持video~~
</video>

 

值得注意的就是这几个属性,autoplay(自动播放)、loop(循环播放)、controls(默认视频操作控件)、poster(封面)

2.js接口

//播放、暂停
video.paused?video.play():video.pause();

// 音量、静音
video.volume += x; // 1>x>0;
video.muted = true; //true就是静音

//播放速度
video.playbackRate = x; //x是倍数

//视频当前时间、总时间
video.currentTime; 
video.duration;

//全屏播放(非标准)
video.webkitRequsetFullScreen();
video.webkitExitFullScreen();//退出全屏

//时间改变事件
video.addEventListener(‘timeupdate‘,function(){
   //当video.currentTime发生变化时触发    
})

 

当然还有一些常用事件例如‘canplay’、‘waiting’、‘ended‘、‘error’。

 ps:audio和video的操作是一模一样的,但是audio没有video的poster属性。

H5新特性之video audio

标签:src   style   eve   func   自动播放   ror   ide   time   poster   

原文地址:http://www.cnblogs.com/amiezhang/p/7875275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!