Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

HTML5 Video(视频)

Video标签介绍

大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签<video>带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类似Flash的私有插件的方法。

直到现在，仍然不存在一项旨在网页上显示视频的标准。

浏览器支持情况

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

Video标签的使用

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外，还可以包含当指定的视频都不能播放时，返回的内容。

(1) src属性和poster属性

你能想象src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。


(2) preload属性

这个属性也能通过名字了解用处，此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。


None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。

Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。

Auto：全部预加载。

(3) autoplay属性

又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。


注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，此时属性要么没有值，要么其值恒等于他的名字（此处，自动播放为<video autoplay />或者<video autoplay=”autoplay” />）；而在标签中不使用此属性表示false（此处不进行自动播放为<video />）。

 (4) loop属性


一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。

(5) controls属性

Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。


控制栏须包括播放暂停控制，播放进度控制，音量控制等等。

每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题，Firefox和Safari的Video标签不正常，所以这两个只能在网上找截图了。

(6) width属性和height属性

属于标签的通用属性了，这个不用多说。

视频格式与浏览器的支持

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:


浏览器                     MP4              WebM             Ogg


Internet Explorer    YES                  NO                 NO    

Chrome                   YES                 YES                 YES    

Firefox                     YES                 YES                YES    

Safari                      YES                  NO                 NO    

Opera        YES (从 Opera 25 起)    YES                 YES    

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 
function playPause()
{ 
if (myVideo.paused) 
 myVideo.play(); 
else 
 myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.width=600; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>


Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5视频播放功能</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ var video = $('#myvideo'); $("#play").click(function(){ video[0].play(); }); $("#pause").click(function(){ video[0].pause(); }); $("#go10").click(function(){ video[0].currentTime+=10; }); $("#back10").click(function(){ video[0].currentTime-=10; }); $("#rate1").click(function(){ video[0].playbackRate+=2; }); $("#rate0").click(function(){ video[0].playbackRate-=2; }); $("#volume1").click(function(){ video[0].volume+=0.1; }); $("#volume0").click(function(){ video[0].volume-=0.1; }); $("#muted1").click(function(){ video[0].muted=true; }); $("#muted0").click(function(){ video[0].muted=false; }); $("#full").click(function(){ video[0].webkitEnterFullscreen(); // webkit类型的浏览器 video[0].mozRequestFullScreen(); // FireFox浏览器 }); }); </script> </head> <body> <video id="myvideo" width="400"> <source src="iceage4.mp4" type="video/mp4" /> <source src="iceage4.webm" type="video/webM" /> <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" /> 你的浏览器不支持html5 </video> <hr> <button id="play">播放</button> <button id="pause">暂停</button> <button id="go10">快进10秒</button> <button id="back10">快退10秒</button> <button id="rate1">播放速度+</button> <button id="rate0">播放速度-</button> <button id="volume1">声音+</button> <button id="volume0">声音-</button> <button id="muted1">静音</button> <button id="muted0">解除静音</button> <button id="full">全屏</button> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492782 spielt ab