html5加载文档 html 加载中

如何使用html5？

1、video src="hangge.mp4" controls/video1

2，通过width和height设置视频窗口大小

video src="hangge.mp4" controls width="400" height="300"/video1

3，预加载媒体文件

设置preload不同的属性值，可以告诉浏览器应该怎样加载一个媒体文件：

（1）值为auto：让浏览器自动下载整个文件

（2）值为none：让浏览器不必预先下载文件

（3）值为metadata：让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）

!-- 用户点击播放才开始下载 --video src="hangge.mp4" controls preload="none"/video12

4，自动播放

（1）使用autoplay属性可以让浏览器加载完视频文件后立即播放。

video src="hangge.mp4" controls autoplay/video1

（2）如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。

video src="hangge.mp4" controls autoplay muted/video1

5，循环播放

使用loop属性让视频播放结束时，再从头开始播放。

video src="hangge.mp4" controls loop/video1

6，设置替换视频的图片（封面图片）

通过poster属性可以设置，浏览器在下面三种情况下会使用这个图片：

（1）视频第一帧未加载完毕

（2）把preload属性设置为none

（3）没有找到指定的视频文件

video src="hangge.mp4" controls poster="hangge.png"/video1

7，浏览器兼容，如何让每一个浏览器都能顺利播放视频

现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案：

（1）使用多种视频格式

video和audio元素有个内置的格式后备系统。我们不使用src属性，而是在其内部嵌套一组source元素，浏览器会选择播放第一个它所支持的文件。

我们可以添加WebM格式的视频提供对Opera的支持。

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

/video1234

（2）添加Flash后备措施（推荐）

上面那个方法不推荐，应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种连video元素都不支持的老浏览器。

这里使用Flowplayer Flash作为备用播放器（本地下载 ：flowplayer-3.2.18.zip）

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

object id="flowplayer" width="400" height="300"

data="flowplayer-3.2.18.swf"

type="application/x-shockwave-flash"

param name="movie" value="flowplayer-3.2.18.swf"

param name="flashvars" value='config={"clip":"hangge.mp4"}'

/object

/video1234567891011

（3）也有人优先使用Flash，而HTML5作为后备措施。

这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户

object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash"

param name="movie" value="flowplayer-3.2.18.swf"

param name="flashvars" value='config={"clip":"hangge.mp4"}'

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

/video

/object

相关问答

Q1: 安卓怎么加载html5开发的文件

下载安装MyEclipse2014，Android SDK，eclipse(需配置Android开发环境)

Java和Android环境安装与配置，将另写经验分享，读者也可百度参考其他相关资料，自行安装

打开MyEclipse2014，新建一个HTML5 Mobile Application Project，命名，例如：hello

html5程序在工程www目录下编辑；

编辑好我们的html5程序，下面就要开始学习打包了

这里介绍两种打包方式：1、PhoneGap Build Service 打包

PhoneGap官网有相关教程可参考，不具体介绍

2、android SDK +eclispe 打包

android SDK +eclispe 打包(前提已配置好，android开发环境)：

Step1、启动eclipse，新建Android Application Project，即Android工程，命名，例如：hello

Step2、将前面Myeclipse2014中编辑好的HTML5程序(www整个目录）拷至刚刚在eclipse新建hello工程对应assets目录下面

Step3、下面要做的就是如何将我们的HTML5程序在Android应用中启动，这里我们要使用Android系统自带的WebView控件（具体信息参考Adroid开发文档）---在工程下找到res-layout-activity_main.xml并打开，向里面插入WebView控件，编辑好自己想要的样式

Step4、在主程序入口，用刚刚编辑好的WebView控件将HTML5程序引入，此时，主体功能已实现，编译工程即可得到apk

备注说明：由于篇幅有限，不能详细介绍开发流程，欲了解更多，请参考Android开发手册

Q2: html5和html可以同时用在一个文档里吗,还有新建文档的时候，图片上显示的文档类型，选择哪个好点？

HTML5没有单独的文件名，只是一道规范而已，同一个页面，写入HTML5新增的特性比如canvas,对于支持HTML5的浏览器来说能正常执行，不支持的就直接忽略掉这个标签。像你上面的截图如果你选择HTML5，这样就可以预加载HTML5的标签，方便你编写代码，同理你选择HTML4，这样他会预加载适合HTML4的一些属性。其实就算你选了HTML5，依然可以写HTML4的代码。

Q3: 有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档

目前找到的几种方式：

1.像以前的百度文库那样，先转换成flash，然后放在网页上。

说明：使用软件OpenOffice/LibreOffice，swftools。

优点：在国内，由于Flash安装量很大，而且很多人用IE和Chrome内核的浏览器，所以是可以查看的。

缺点：OpenOffice/LibreOffice转换的结果可能会丢失格式/排版（我没试过所以不知道会不会），而且比较耗服务器资源，如果浏览器没装Flash就没法查看文档了，尤其是移动端。

2.转换成PDF，然后用Mozilla的pdf.js查看。

说明：转换成PDF的方法可以用OpenOffice/LibreOffice，也可以用七牛的第三方服务“文档转换”（由亿方云提供）。

优点：如果是把文件存放在七牛云，用在线的服务会比较有保障，加载速度也快。

缺点：收费，不过费用很低廉，pdf.js可能比较大，加载相对慢点，放到七牛上面会好些，对移动端支持不好。

3.转换成HTML，像现在的百度文库那样。

说明：使用PHPOffice和PDFtoHTML将文档转换成HTML直接在浏览器输出，类似现在的百度文库。

优点：浏览器无需安装任何插件，也不用担心兼容性问题，还支持移动端。

缺点：可能会丢失格式，而且用户可以直接拷贝文档内容，如果是扣积分下载的话，可能达不到目的。

关于html5加载文档和html 加载中的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。