當前位置 : IT培訓網 > Web前端 > Web教程 > 如何在HTML5網頁中插入 Video(視頻)

如何在HTML5網頁中插入 Video(視頻)

時間:2016-12-07 13:52:35??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
如果想要制作一個漂亮好看的視頻還需要我們有設計天賦,但學了這節課,一個簡單的視頻還是可以做出來的。好了,你知道如何在HTML5網頁中植入視頻了吧,如果還不懂,請咨詢IT培訓網小編吧,讓我們一起學習,一起進步,共同

在一個網頁中植入視頻是最常見的事情了,比如優酷、土豆等等視頻網站,哪一個網頁沒有視頻呢,至于如何制作的,還需要參加培訓班來學習下了,下面就先隨著小編一起來看看在HTML5網頁中如何植入Video(視頻)吧!

HTML5 Video(視頻)

很多站點都會使用到視頻. HTML5 提供了展示視頻的標準。

HTML5 Video 標簽

標簽

描述

<video>

定義一個視頻

<source>

定義多種媒體資源,比如 <video> 和<audio>

<track>

定義在媒體播放器文本軌跡

 

Web站點上的視頻

直到現在,仍然不存在一項旨在網頁上顯示視頻的標準。

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

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

瀏覽器支持

如何在HTML5網頁中插入 Video(視頻)_www.oalvodamoda.com

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

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

HTML5 (視頻)- 如何工作

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

實例

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

您的瀏覽器不支持Video標簽。

</video>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鳥教程(runoob.com)</title> 

</head>

<body>

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  您的瀏覽器不支持 HTML5 video 標簽。

</video>

</body>

</html>

運行結果:

如何在HTML5網頁中插入 Video(視頻)_www.oalvodamoda.com

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

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

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

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

視頻格式與瀏覽器的支持

當前, <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 文件

視頻格式

格式

MIME-type

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

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

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

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

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

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

實例 1

為視頻創建簡單的播放/暫停以及調整尺寸控件:

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鳥教程(runoob.com)</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(視頻)_www.oalvodamoda.com

上面的例子調用了兩個方法:play() 和 pause()。它同時使用了兩個屬性:paused 和 width。

植入視頻的方式就這些了,如果想要制作一個漂亮好看的視頻還需要我們有設計天賦,但學了這節課,一個簡單的視頻還是可以做出來的。好了,你知道如何在HTML5網頁中植入視頻了吧,如果還不懂,請咨詢IT培訓網小編吧,讓我們一起學習,一起進步,共同學習HTML5方面的更多知識。

頂一下
(2)
66.7%
踩一下
(1)
33.3%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天