文档章节

html5的video的封面poster图片填充

豆花饭烧土豆
 豆花饭烧土豆
发布于 2016/10/20 18:26
字数 528
阅读 2080
收藏 1

html5支持视频播放,而且趋势,facebook也全面切换到html5了,最近做一个简单的视频播放器,测试了好多jplayer,video.js之类的都觉得不太好,所以自己写一个最简单的,不过发现了一个问题,视频播放之前的封面不太好……

封面的尺寸被强制缩小了,我需要填充整个播放器的。

< !DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        <style type="text/css">
        .video-container1{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video1{
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
    <div class="video-container1">
        <video class="video1" src="oceans.mp4" poster="1.jpg" controls>

        </video>
    </div>
    </body>
</html>

blog_html5_video_background_01_20151223.jpg
blog_html5_video_background_02_20151223.jpg

所以查了一下资料,并没有发现html5的video属性支持处理poster的尺寸问题,然后发现了一个hacker的方法:
The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:

将poster页面设置为一个透明的图片或者不存在的值,这样浏览器就会无法显示poster,然后通过设置播放器的css背景background,将我们需要的背景图放进去,并且填充背景,并且我们用background-size属性去告诉浏览器,这个播放器或者这个元素被这个图片覆盖。

video{
    width: 100%;
    height: 100%;
    background:transparent url('img/1.jpg') 50% 50% no-repeat;

    //下面就是background-size,每种浏览器都写一个配置
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

详细代码在这里:
友人提醒,将测试代码放到github方便其他人测试:(https://github.com/yuanyuanyuan/my-git/tree/master/test1

< !DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        <style type="text/css">
        .video-container1{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video1{
            width: 100%;
            height: 100%;
        }
        .video-container2{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video2{
            width: 100%;
            height: 100%;
            background:transparent url('1.jpg') 50% 50% no-repeat;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
        }
        </style>
    </head>
    <body>
    <div class="video-container1">
        <video class="video1" src="oceans.mp4" poster="1.jpg" controls>

        </video>
    </div>
    <div class="video-container2">
        <video class="video2" src="oceans.mp4" poster="2.jpg" controls>

        </video>
    </div>
    </body>
</html>

展示效果如下:

blog_html5_video_background_03_20151223.jpg

引用参考:
http://www.iandevlin.com/blog/2013/03/html5/html5-video-and-background-images
http://www.w3school.com.cn/cssref/pr_background.asp
http://www.w3schools.com/css/css_image_transparency.asp

本文转载自:http://www.godblessyuan.com/2015/12/23/html5%E7%9A%84video%E7%9A%84%E5%B0%81%E9%9D%A2poster%E5%9B%BE

豆花饭烧土豆

豆花饭烧土豆

粉丝 15
博文 357
码字总数 93591
作品 0
深圳
私信 提问
HTML5 Audio/Video 标签,属性,方法,事件汇总

注:本文内容来源自W3C ,对原文进行了浓缩,但只对chrome浏览器进行了测试和验证。 W3C草案原文地址:http://www.w3.org/TR/html5/video.html 标签属性: src:音乐的URL preload:预加载 ...

红薯
2012/06/27
608
0
H5视频兼容安卓、IOS踩坑相关

1.视频暂停和播放 将JQ对象转换为原生JS对象 有遮罩层的视频播放和暂停 2.音乐开关 3.视频切换+音量播放 pug js 4.微信不能够自动播放 5.页面强制横屏问题 6.H5--移动端视频video的android兼...

谭瞎
2018/07/28
0
0
ubuntu作为服务器为何在客户端浏览器不能正常显示视频(HTML5编写)?

已经在ubuntu系统的电脑里安装了apache,配置正确。如上是按HTML5格式写的代码,放入index.html中,用另一台电脑访问IP地址,文字可以整成显示,但是视频和封面图片不能显示;在服务器本身运...

socket
2012/07/21
885
2
好程序员前端分享HTML5 发展史

  好程序员前端分享HTML5发展史,HTML5草案的前身名为WebApplications1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。   HTML5的第一份正式草案已于2008年1...

好程序员IT
05/05
7
0
如何使用HTML5实现拍照上传应用

在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。 1、 视频流 HTML5 The Media Capture API提供了对摄像头...

彭博
2012/04/12
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
今天
5
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部