网页中的动态GIF图片是非常受欢迎的,因为它们相比静态图片更生动,相比网页视频更简单。但是GIF图片通常具有较大的体积,就导致网页加载速度变慢,内存使用增加。通过使用html video,可以使浏览器
顺晟科技
2021-08-07 10:46:52
125
1.获得当前视频的长度:duration
duration 属性返回当前音频/视频的长度,以秒计。
如果未设置音频/视频,则返回 NaN (Not-a-Number)。
myVid=document.getElementById("video1");
alert(myVid.duration
);
2. currentTime 属性
将时间位置设置为 5 秒:
myVid=document.getElementById("video1");
myVid.currentTime=5
;
currentTime 属性设置或返回音频/视频播放的当前位置(以秒计)。
当设置该属性时,播放会跳跃到指定的位置。
设置 currentTime 属性:
audio|video.currentTime="seconds"
返回 currentTime 属性:
audio|video.currentTime
3.
目前没有一个视频格式兼容所有浏览器,的解决方法就是把视频转换成多种格式。
首先要准备一个 mp4 格式的视频,可以在苹果设备中使用;
其次要准备 ogv 格式的视频,用在火狐浏览器中;
最后要准备一下 webm 格式的视频,这个可以用在谷歌浏览器等。
准备多格式浏览器的麻烦之处在于转换格式。推荐一个国外的工具 Online converter ,在线免费视频转换工具。
如果浏览器不支持 video ,将会把 video 中的提示内容显示出来。那么对付老旧浏览器,我们可以用传统的 flash 来替换这个提示内容。 <video width="800" height="374">
<source src="my_video.mp4" type="video/mp4" />
<source src="my_video.ogv" type="video/ogg" />
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">
<param name="movie" value="fallback.swf" />
<param name="flashvars" value="autostart=true&file=video.flv" />
</object>
</video>
4.video视频事件监听timeupdate事件
// Listens for the \'timeupdate\' event to be raised by the video, and calls the updateProgress() function to update the progress bar
video.addEventListener("timeupdate", updateProgress, false);
5.video对象的canPlayType()方法
15
2022-09
15
2022-09
07
2021-08
07
2021-08
07
2021-08