开发笔记之20140219_html5 video poster不显示中间播放按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/Kevinzhangfei/article/details/19493843

本文介绍了HTML5中使用video标签播放视频的方法，包括不同浏览器兼容性处理、控制条及预览图设置等。同时，还讲解了如何利用favicon.ico为网站设置图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Html视频标签video有多中属性，例如src表示video播放的视频的位置，由于不同的浏览器支持不同的视频格式，因此可以用<resource>标签设置多个视频文件，浏览器会根据支持的格式选择播放哪个视频。如下所示：
<video controls="controls">
<source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
<source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
<source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />
<p>Sorry, Your browser does not support Html5.</p>
</video>

2.favicon.ico是浏览器标签上显示的当前访问网页的图标，在页面中通过一下代码就可以设置网页图标。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>home page</title>
<link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
</head>
<body>
home page
</body>
</html>

3.Html5视频标签video属性poster是在视频播放前显示的图片，如下所示：
<video controls="controls" poster="poster.jpg">

4.Html5视频标签Video属性controls控制播放窗口是否带控制条，包括播放和暂停按钮。只要在Video标签中出现controls属性名便会出现控制条，无论controls的值是true还是false，ps：在chrome浏览器下。
autoplay：true/false，当autoplay的值为true时，视频准备好之后则会自动播放，而当autoplay的值为false时，不自动播放。
height： pixels 设置视频播放器的高度。
loopend： numeric value 定义在视频流中循环播放停止的位置，默认是 end 属性的值。
loopstart： numeric value 定义在视频流中循环播放的开始位置。默认是 start 属性的值
playcount： numeric value 定义视频片段播放多少次。默认是 1。
poster： url 在视频播放之前所显示的图片的 URL。
src： url 要播放的视频的 URL。
start： numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。
width： pixels 设置视频播放器的宽度

5.Html5的canvas元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

6.设计模式中的工厂模式分为简单工厂、工厂方法和抽象工厂三种模式。简单工厂模式包含三个主要角色：
工厂角色：负责创建所有对象的逻辑。
抽象类（接口）角色：所有具体对象的父类。
具体产品角色：工厂生产的具体产品类。