HTML的poster属性怎么用?

yanghs · · 927 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

HTML的poster属性主要应用在<video>元素中,用于在视频下载或用户单击播放按钮时显示图像;如果未设置此图像,则会将第一帧视频作为海报图像。

原文地址:HTML的poster属性怎么用?

HTML poster属性

语法:

<video poster="URL">

属性值:它包含一个值URL,用于指定源图像的链接。下面列出了两种类型的URL链接:

● 绝对URL:它指向另一个网页。

● 相对URL:它指向同一网页的其他文件。

示例:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>没有设置poster属性</h3>

<video width="400" height="200" controls>

<source src="http://img.php.cn/ueditor/php/upload/video/20190327/1553657855333112.mp4"

          type="video/mp4">

<source src="http://img.php.cn/ueditor/php/upload/video/20190327/1553657855333112.ogg"

          type="video/ogg">

</video>

<h3>没有设置poster属性</h3>

<video width="400" height="200" controls

          poster="https://img.php.cn/upload/article/000/000/006/5d2bed9f2e789818.jpg">

<source src="http://img.php.cn/ueditor/php/upload/video/20190327/1553657855333112.mp4"

        type="video/mp4">

<source src="http://img.php.cn/ueditor/php/upload/video/20190327/1553657855333112.ogg"

        type="video/ogg">

</video>

</body>

</html>

效果图:

浏览器支持

● Google Chrome 4.0

● Internet Explorer 9.0

● Firefox 3.5

● Apple Safari 4.0

● Opera 10.5

相关推荐:

angularjs教程

golang教程

redis入门教程


有疑问加站长微信联系(非本文作者)

本文来自:简书

感谢作者:yanghs

查看原文:HTML的poster属性怎么用?

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

927 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传