HTML5 视频

在 HTML 5 出现之前，视频只能使用 Flash 等插件在浏览器中播放。但是在 HTML 5 发布之后，向网页添加视频就像添加图像一样简单。 HTML5“video”元素指定了在网页上嵌入视频的标准方式。
Web 浏览器通常支持三种不同的格式——mp4、Ogg 和 WebM。下表列出了不同浏览器支持的格式：

Browser	MP4	WebM	OGG
Google Chrome	Yes	Yes	Yes
Internet Explorer	Yes	No	No
Firefox	Yes	Yes	Yes
Opera	Yes	Yes	Yes
Safari	Yes	Yes	No

句法 ：

下面列出了可以与“video”标签一起使用的属性：

1. 自动播放：它告诉浏览器立即开始下载视频并尽快播放。
2. Preload ：它旨在向浏览器提供有关作者认为将带来最佳用户体验的提示。
3. Loop ：它告诉浏览器自动循环播放视频。
4. height ：它以 CSS 像素为单位设置视频的高度。
5. width :它以 CSS 像素为单位设置视频的宽度。
6. 控制： 它显示了默认的视频控件，如播放、暂停、音量等。
7. 静音：将视频中的音频静音。
8. 海报：它在加载视频之前加载要预览的图像。

使用 HTML5 添加视频：

输出 ：

代码说明：

• Controls 属性用于添加播放、暂停、音量等控件。
• “source”元素用于指定浏览器将要播放的视频
  选择玩。

使用 HTML5 自动播放视频：
要自动启动视频，请使用 autoplay 属性。

HTML

 
 
Adding Video on my webpage


 

输出 ：

使用 JavaScript 的 HTML 视频：
可以为视频设置许多属性和事件，例如加载、播放和暂停视频，以及设置持续时间和音量。

HTML

 

  Pause/Play
  Big
  Small
  Normal
  
  
    
    
  

 

var testvideo = document.getElementById("myvideo");
 
function Pauseplay() {
    if (testvideo.paused)
        testvideo.play();
    else
        testvideo.pause();
}
 
function Big() {
    testvideo.width = 600;
}
 
function Small() {
    testvideo.width = 300;
}
 
function Normal() {
    testvideo.width = 450;
}



 

输出 ：

支持的浏览器：

• 谷歌浏览器 4.0
• 浏览器 9.0
• 火狐 3.5
• 歌剧 10.5
• Safari 4.0