国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

HTML5使用Video 元素

直到現(xiàn)在,仍然不存在一項旨在網(wǎng)頁上顯示視頻的標準。

今天,大多數(shù)視頻是通過插件(比如 Flash)來顯示的。然而,并非所有瀏覽器都擁有同樣的插件。

HTML5 規(guī)定了一種通過 video 元素來包含視頻的標準方法。

HTML5 (視頻)- 如何工作

如需在 HTML5 中顯示視頻,您所有需要的是:

實例

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>php中文網(wǎng)</title> 
</head>
<body>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持Video標簽。
</video>
</body>
</html>

<video> 元素提供了 播放、暫停和音量控件來控制視頻。

同時<video> 元素元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設(shè)置的高度和寬度,所需的視頻空間會在頁面加載時保留。。如果沒有設(shè)置這些屬性,瀏覽器不知道大小的視頻,瀏覽器就不能再加載時保留特定的空間,頁面就會根據(jù)原始視頻的大小而改變。

<video> 與</video> 標簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。

<video> 元素支持多個 <source> 元素. <source> 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式:

視頻格式與瀏覽器的支持

當前, <video> 元素支持三種視頻格式: MP4, WebM, 和 Ogg:

QQ截圖20161013163806.png

  • MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

  • WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

  • Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

視頻格式

QQ截圖20161013163801.png

HTML5 <video> - 使用 DOM 進行控制

HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。

<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.

其中的方法有用于播放、暫停以及加載等。其中的屬性(比如時長、音量等)可以被讀取或設(shè)置。其中的 DOM 事件能夠通知您,比方說,<video> 元素開始播放、已暫停,已停止,等等。

例中簡單的方法,向我們演示了如何使用 <video> 元素,讀取并設(shè)置屬性,以及如何調(diào)用方法。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)</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="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=560; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>

HTML5 Video 標簽

QQ截圖20161013163849.png

繼續(xù)學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)</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="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=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
提交重置代碼