18910140161

html 5视频

顺晟科技

2021-08-07 10:46:52

125

1.获得当前视频的长度:duration

 

duration 属性返回当前音频/视频的长度,以秒计。

 

如果未设置音频/视频,则返回 NaN (Not-a-Number)。

 

语法   audio|video.duration

 

 

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.

HTML5 video 跨浏览器兼容的方法

目前没有一个视频格式兼容所有浏览器,的解决方法就是把视频转换成多种格式。

首先要准备一个 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&amp;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()方法
















 

  • TAG:
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航