HTML5开发教程之HTML5视频播放demo

多数视频是通过插件(比如 Flash)来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

在HTML5中，video元素目前支持三种格式的视频文件，

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

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

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

那么在HTML5中如何显示视频呢?例子如下：

<video src="demo.mp4" width="500" height="250" controls="controls">您的浏览器不支持此种视频格式。</video>

好了，现在来解释下video元素中各属性的含义，其中width、height就不解释了啊，主要说下controls,顾名思义，controls 就是控件们，哈哈，就是视频的播放、音量暂停等控件。video元素中间插入的汉字，聪明的你一定知道的，是提示用户浏览器不支持视频格式使用的。

需要注意的是，要确保适用于Safari 浏览器，视频文件必须是 MP4类型。而ogg格式的视频则是适用于Firefox、Opera 以及Chrome 浏览器。Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。

当然了，我们如果不确定自己的浏览器支持什么格式的视频，可以先检测一下。若是不想麻烦，那怎么办呢?我们可以这样：

您的浏览器不支持此种视频格式。

</video>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式，这样我们只要多准备几个不同格式的视频就可以了。

接下来，介绍几个video标签的属性，

1.autoplay :出现该属性意味着视频在就绪后将自动播放，用法：autoplay="autoplay"

2.controls :出现该属性意味着向用户显示控件，如播放按钮等，用法：controls="controls"

3.height:设置高度

4.width:设置宽度

5.loop:自动重播，用法：loop="loop"

6.preload:视频在页面加载时进行加载并预备播放，用法：preload="auto"

auto - 当页面加载后载入整个视频

meta - 当页面加载后只载入元数据

none - 当页面加载后不载入视频

注意：若使用了autoplay，则忽略preload

7.src:要播放视频的url

更多嵌入式、物联网、安卓、Java、HTML5等请继续关注华清远见成都中心！

用sketch预先设计好UI界面

要想成为真正的全栈开发者，自己会设计那是必不可少

sketch工具

切图片导入hype编码

实现方式：

无聊花了半天做的，其实就是拿一个<audio>实现的，把audio给隐藏了..然后获取播放进度，切歌就是替换audio的src路径，<audio>标签有很多api足以自己动手做一个播放器了，无需第三方库，用到了jQuery，不过这个只是个demo做着玩儿的，还有些功能没写了。

在线预览地址

http://show.lslbk.cn/html5/musicApp/musicApp.html

源码demo下载地址：

http://myblog-1253111993.cosgz.myqcloud.com/file/musicAppH5.zip

们做安卓开发时，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

实例图片

效果图

有任何关于编程的问题都可以私信我，我看到后会及时解答。

编程小石头，为分享干货而生！据说，每个年轻上进，颜值又高的互联网人都关注了编程小石头。

在线咨询

上一篇：Vue基础，css样式操作，flex布局，通过操作样式改变字的大小
下一篇：动态模板自动化测试探索

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商