HTML5 Video(視頻)

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

檢測您的瀏覽器是否支持 HTML5 視頻：

檢測

Web站點上的視頻

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

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

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

瀏覽器支持

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

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

HTML5 (視頻)- 如何工作

如需在 HTML5 中顯示視頻，您所有需要的是：

實例

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

</video>

<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

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

播放/暫停放大縮小普通

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

HTML5 Video 標簽

標簽	描述
<video>	定義一個視頻
<source>	定義多種媒體資源,比如 <video> 和<audio>
<track>	定義在媒體播放器文本軌跡

ideo標簽

Your browser does not support the video tag.

</video>

controls 屬性供添加播放、暫停和音量控件。

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

視頻播放

獲取video標簽

var myVideo=document.getElementById("video1");

播放

myVideo.play();

暫停

myVideo.pause();

們做安卓開發時，webview中發現html5 視頻的autoplay根本沒實現，查看了下android 源碼HTMLVideoElement.cpp也未見相應處理，網上有資料顯示，這可能關乎UI線程與后臺線程的協調性，我看，以后的升級版本總會解決這個問題的。

html5標簽屬性不支持，那只有通過javascript來處理了

演示apk下載地址：http://download.csdn.net/detail/qiushi_1990/9513038

github源碼下載：https://github.com/qiushi123/H5Demo

下面是實現步驟和原理

一，我們在設置的WebViewClient中覆蓋方法：

不要忘記了webview.getSettings().settings.setJavaScriptEnabled(true)啟用javascript,AndroidManifest加入INTERNET權限

@Override
public void onPageFinished( WebView view, String url) {
view.loadUrl("javascript：try{autoplay();}catch(e){}");
}

實例代碼

 public class Html5VideoAutoPlay extends Activity {
		WebView webview = null;
		@Override
		protected void onCreate(Bundle savedInstanceState) {
			super.onCreate(savedInstanceState);
			setContentView(R.layout.html5video);
			webview = (WebView)findViewById(R.id.webview);
			webview.getSettings().setJavaScriptEnabled(true);
			webview.setWebViewClient(new WebViewClient(){
				/**
				 * 當前網頁的鏈接仍在webView中跳轉
				 */
				@Override
				public boolean shouldOverrideUrlLoading(WebView view, String url) {
					view.loadUrl(url);
					return true;
				}
				/**
				 * 處理ssl請求
				 */
				@Override
				public void onReceivedSslError(WebView view,
						SslErrorHandler handler, SslError error) {
					handler.proceed();
				}
				/**
				 * 頁面載入完成回調
				 */
				@Override
				public void onPageFinished(WebView view, String url) {
					super.onPageFinished(view, url);
					view.loadUrl("javascript：try{autoplay();}catch(e){}");
				}
			});
			webview.setWebChromeClient(new WebChromeClient() {
				/**
				 * 顯示自定義視圖，無此方法視頻不能播放
				 */
				@Override
				public void onShowCustomView(View view, CustomViewCallback callback) {
					super.onShowCustomView(view, callback);
				}
			});
			webview.loadUrl("file:///sdcard/html/video.html");
		}
		@Override
		protected void onPause() {
			if(null != webview) {
				webview.onPause();
			}
			super.onPause();
		}
 }

二，布局文件

html5video.xml

	<?xml version="1.0" encoding="utf-8"?>
		<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
			android:layout_width="match_parent"
					android:layout_height="match_parent"
					android:orientation="vertical" >
		<WebView android:id="@+id/webview"
			android:layout_width="match_parent"
			android:layout_height="match_parent"/>
		</LinearLayout>

三，html文件（這里用的是html5的video標簽來設置自動播放和循環播放）

video.html

		<body>
		<video id="video" src="b.mp4" width="480" height="320" controls loop>
			don't support html5
		</video>
		</body>
		<script type="text/javascript">
			var video = document.getElementById("video");
			video.play();
		</script>

上面的src可以引入本地視頻b.mp4,

也可以引入網上視頻：http://2449.vod.myqcloud.com/2449_43b6f696980311e59ed467f22794e792.f20.mp4

個人覺得html5結合Android會讓未來各種技術實現越來越簡單。到我的個人博客查看更多h5與安卓的結合案例。

也可以關注我github里的其他開源項目。

github：https://github.com/qiushi123?tab=repositories

實例圖片

效果圖

有任何關于編程的問題都可以私信我，我看到后會及時解答。

編程小石頭，為分享干貨而生！據說，每個年輕上進，顏值又高的互聯網人都關注了編程小石頭。?

在線咨詢

上一篇：第一次投電子標怕出紕漏？別急，看這里！
下一篇：14個HTML5實現的效果合集

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商