html5 voide

来源：互联网发布：视频广告过滤大师 mac 编辑：程序博客网时间：2024/06/05 08:20

测试的love.webm格式的视频文件下载地址：http://html5demos.com/assets/dizzy.webm

我是开发andorid的所以整体在ubuntu环境下，这时候为了显示效果，安装了服务器，如下：

$ sudo apt-get install apache2

启动服务

$ sudo /etc/init.d/apache2 start
* Starting web server apache2 httpd (pid 9634) already running
[ OK ]

把你写的html文件放入下面的目录下

pateo@pateo-B86N53X:/var/www$ ls
html5.html index.html liao.jpg love.mp4 love.ogv love.webm test.html

相应的代码：

<!DOCTYPE HTML><html><body>  <video width="320" height="240" autoplay>    <source src="love.mp4" type="video/mp4" />     <source src="love.webm" type="video/webm" />     <source src="love.ogv" type="video/ogv" />   </video> </body></html>

我测试了上面的代码发现用google的浏览器只有下面这一句有用，其他的都没有效果，然后用火狐试了，三句都没效果

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

有效的在Chrome浏览器上的效果代码，最好下载最新版本的浏览器版本

<!DOCTYPE HTML><html><body>  <video width="320" height="240" autoplay>     <source src="love.webm" type="video/webm" />   </video> </body></html>

视频的网页版截图：

上面是自动播放的方式，自己控制的方式：

<!DOCTYPE HTML><html><body>  <video width="320" height="240" controls>     <source src="love.webm" type="video/webm" />   </video> </body></html>

相应的效果截图：

下面的代码需要你自己测试看效果，呵呵

<!DOCTYPE HTML><html><body>  <video width="320" height="240" preload="none">     <source src="love.webm" type="video/webm" />   </video> </body></html>

<!DOCTYPE HTML><html><body>  <video width="320" height="240" preload>     <source src="love.webm" type="video/webm" />   </video> </body></html>