html5 voide

最新推荐文章于 2023-06-29 22:21:24 发布

沈纵情

最新推荐文章于 2023-06-29 22:21:24 发布

阅读量2.2k

点赞数

分类专栏： html5-web 文章标签： html5 video 浏览器 apache 测试 chrome

本文链接：https://blog.csdn.net/jianguo_liao19840726/article/details/7630762

版权

html5-web 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

测试的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>