HTML5实现首页动态视频背景

华厦飞燕 發表於 2019-9-25 15:16:00

话不多说，先看效果图：
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_focused cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="5"><img class="has cke_widget_element" src="https://img-blog.csdnimg.cn/20190925144356298.gif" alt="" width="1200" height="897" src="https://img-blog.csdnimg.cn/20190925144356298.gif" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20190925144356298.gif&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;1200&quot;,&quot;height&quot;:&quot;897&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:{&quot;has&quot;:1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image"><img class="cke_reset cke_widget_drag_handler" title="点击并拖拽以移动" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="15" height="15" data-cke-widget-drag-handler="1">
炫酷吗？你想实现这种动态视频作为背景的首页吗？来，一起来学习，本文将带你一起实现H5动态视频背景；
 
首先网上找一段清晰的视频下载下来，最好是MP4格式的；
下载好了之后我们新建一个html文件来写代码：
 html代码：
<div class="cnblogs_code">
<pre> <video id="v1" autoplay loop muted>
 <source src="./video2.mp4" type="video/mp4"/>
 </video></pre>
</div>
一个video标签包裹着，source代表来源文件，autoplay属性是自动播放，loop代表循环播放，muted代表无声播放；
如果不加入autoplay属性是无法自动播放的，页面将会黑屏展示；
css代码：
<div class="cnblogs_code">
<pre> *{
 margin: 0px;
 padding: 0px;
 }
 video{
 position: fixed;
 right: 0px;
 bottom: 0px;
 min-width: 100%;
 min-height: 100%;
 height: auto;
 width: auto;
 /*加滤镜*/
 /*filter: blur(15px); //背景模糊设置 */
 /*-webkit-filter: grayscale(100%);*/
 /*filter:grayscale(100%); //背景灰度设置*/
 z-index:-11
 }
 source{
 min-width: 100%;
 min-height: 100%;
 height: auto;
 width: auto;
 } </pre>
</div>
css代码主要是进行定位和放大达到全屏播放的效果，主要是对video进行宽高之类的设置，还有别忘了要给z-index给个值，让放置在底部，只要小于0都可以，没有影响；
就这样我们的动态视频背景就完成了，如果想设置播放速度，我们可以添加js代码（video标签加上id=“v1”属性）：
<div class="cnblogs_code">
<pre> var video= document.getElementById('v1');
 video.playbackRate = 1.5;</pre>
</div>
那么如果我们想要添加内容到页面上怎么办呢？
<div class="cnblogs_code">
<pre> <video id="v1" autoplay loop muted>
 <source src="./video2.mp4" type="video/mp4"/>
 </video>
 <h1 style="color:white">123465</h1></pre>
</div>
是的，在video标签外部添加，然后我们的效果图就是这样的（由于博客对图片大小有限制，所以截屏时间没有很长）：
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_focused cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0"><img class="has cke_widget_element" src="https://img-blog.csdnimg.cn/20190925145949109.gif" alt="" width="1200" height="897" src="https://img-blog.csdnimg.cn/20190925145949109.gif" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20190925145949109.gif&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;1200&quot;,&quot;height&quot;:&quot;897&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:{&quot;has&quot;:1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image"><img class="cke_reset cke_widget_drag_handler" title="点击并拖拽以移动" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="15" height="15" data-cke-widget-drag-handler="1">
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_focused cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0">是不是用H5实现这种动态视频背景效果很简单？赶紧一起来试试吧！！！

</div>
<div id="MySignature" role="contentinfo">
<div>作者：有梦想的咸鱼前端</div>
<div>出处：https://www.cnblogs.com/dengyao-blogs/</div>
<div>本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。 </div> 
来源：https://www.cnblogs.com/dengyao-blogs/p/11584803.html

頁: [1]

琼殿技术论坛's Archiver

HTML5实现首页动态视频背景