HTML 5 视频 -- video 元素

Posted LoveSuk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML 5 视频 -- video 元素相关的知识,希望对你有一定的参考价值。

video 元素支持三种视频格式

IEFirefoxOperaChromeSafari
带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 No 3.5+ 10.5+ 5.0+ No
带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 9.0+ No No 5.0+ 3.0+
带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 No 4.0+ 10.6+ 6.0+ No

 

 

 

 

 

1、设置一个ogg格式的文件

<video src="movie.ogg"  controls="controls" height="200px" width="300px">
您的浏览器不支持 video 标签。
</video>

执行如下:

技术分享

当浏览器不支持ogg格式时则显示“您的浏览器不支持 video 标签。”

2、设置多种格式
<video width="320" height="240" poster="Suk.png" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

执行如下:

 技术分享

如上图为视频设置一个默认图片。也可以添加其他属性。

<video> 标签的属性如下:

controls/controls="controls" 显示播放按钮
autoplay/autoplay="autoplay" 立即播放
loop/loop="loop" 循环播放
muted/muted="muted" 静音
preload/preload="preload" 加载视频d
poster="路径" 显示默认图片

3、自定义播放暂停及大小(Video + DOM)

 <button onclick="playPause()">播放/暂停</button>
  <button onclick="makeNormal()">更改大小</button>

 <video id="video1" width="200">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

javascript写在html的下方

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{
   i f (myVideo.paused)
       myVideo.play();  //播放
   else
      myVideo.pause(); //暂停
}

function makeNormal()
{
    myVideo.width=420; //自定义宽度,高度自适应
}
</script>

执行如下:

技术分享

 大多数浏览器支持的视频方法、属性和事件(日后在做理解)

方法属性事件
play() currentSrc play
pause() currentTime pause
load() videoWidth立即执行--视频元素前执行 progress
canPlayType() videoHeight立即执行--视频元素前执行 error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  

 

 

 

 

 

 

 

 

 

 

 

 

 

下方为html5 视频和音频的方法属性和事件参考

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

 

以上是关于HTML 5 视频 -- video 元素的主要内容,如果未能解决你的问题,请参考以下文章

HTML5中如何显示视频HTML5视频播放

页面中插入视频的方法---video/embed/iframe总结

第五章 音频和视频应用详解(第一篇)

为啥 Chrome浏览器用<video>播放视频没有画面就只有声音,IE就可以。

在另一个元素 HTML5 中显示字幕

html5 video标签简单使用