当前位置:主页 > 网页特效 > 播放器代码 >

html5视频背景插件vidbacking

发布时间:2018/08/01 来源:互联网 浏览: 关键词:HTML5 播放器代码 vidbacking 
html5视频背景插件vidbacking html5视频背景插件vidbacking
阿里云

简要教程

vidbacking是一款响应式的,跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频,插件会自动将背景回退为指定的背景图片。

使用方法

在页面中引入jquery和jquery.vidbacking.js,以及jquery.vidbacking.css文件。

<linkrel="stylesheet"href="path/to/jquery.vidbacking.css"/>
<scriptsrc="path/to/jquery.min.js"></script>
<scriptsrc="path/to/jquery.vidbacking.js"></script>

HTML结构

你可以在某个<div>或<section>元素上制作HTML5视频背景效果。也可以制作全屏的HTML5视频背景效果。对于全屏的视频背景,你需要在body标签之后添加HTML5 video标签,在video标签中需要添加vidbacking class类。

<videoposter="screenshot1.jpg"autoplay muted loopclass="vidbacking">
  <sourcesrc="video1.mp4"type="video/mp4">
  <sourcesrc="video1.webm"type="video/webm">
</video>       

对于在<div>元素内制作视频背景效果,你只需要将video标签放在<div>元素内即可。

<divid="video-back">
  <videoposter="screenshot1.jpg"autoplay muted loopclass="vidbacking">
    <sourcesrc="video1.mp4"type="video/mp4">
    <sourcesrc="video1.webm"type="video/webm">
  </video>
    <!-- html content of the div -->
    <h1>Vidbacking Demo of <div> Background</h1>
</div>      

初始化插件

在页面DOM元素加载完毕之后,可以通过vidbacking()方法来初始化该HTML5视频背景插件。

/* 全屏HTML5视频背景 */
<script type="text/javascript">
  $(function(){
        $('body').vidbacking();
  });
</script>
 
/* DIV元素内的HTML5视频背景 */
<script type="text/javascript">
  $(function(){
        $('#video-back').vidbacking();
  });
</script>

vidbacking HTML5视频背景插件的github地址为:https://github.com/souravm84/vidbacking

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top