怎么在html5中自定义video标签实现海报与播放按钮功能-创新互联

怎么在html5中自定义video标签实现海报与播放按钮功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

创新互联建站服务项目包括华州网站建设、华州网站制作、华州网页制作以及华州网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,华州网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到华州省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

一、问题

1.默认播放按键不好看

2.设置自定义封面图

以上这两点都想自定义

二、思路

1.使用div把video标签盖住

2.div中显示自定义的海报图片与按钮

三、步骤分解

1.海报图片作为div的背景

注:无论是横图还是竖图,都希望按原比例显示在div内
css:

.yourDiv{
 background-color: black;
 height:20em;
 background-image: url('./images/timg.jpg');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
}

html

效果

怎么在html5中自定义video标签实现海报与播放按钮功能

竖图:

怎么在html5中自定义video标签实现海报与播放按钮功能

横图:

2.插入自定义播放图标

css

.yourDiv {
 background-color: black;
 height:20em;
 background-image: url('./images/timg.jpg');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 
 display:flex;
 align-items: center;
}
.yourDiv img { 
 width:20%;
 margin-left: 40%;
}

html


 

效果

怎么在html5中自定义video标签实现海报与播放按钮功能

3.把div覆盖到video标签上

css

.yourDiv {
 background-color: black;
 height:20em;
 background-image: url('./images/timg.jpg');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 
 display:flex;
 align-items: center;
 
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
}
.yourDiv img { 
 width:20%;
 margin-left: 40%;
}

.father {
 background-color: black;
 width:100%;
 height:16em;
 position: relative;
}

htm5

  
  
   
   
  

  
   
  
 

4.触发播放方法

html

 
  
   
   
  

  
   
  
 

js

var video = document.getElementById("video");

function play(){
 document.getElementById("poster").style.display = "none";
 video.play();
}

怎么在html5中自定义video标签实现海报与播放按钮功能

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联网站建设公司,的支持。


网页标题:怎么在html5中自定义video标签实现海报与播放按钮功能-创新互联
本文来源:http://scyanting.com/article/ceseop.html

其他资讯