jQuery html5背景视频插件vidbacking

所属分类:媒体,UI-音频和视频,背景

 4549  60  查看评论 (0)
jQuery html5背景视频插件vidbacking ie兼容10

Video Background Plugin

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

使用方法

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

<link rel="stylesheet" href="path/to/jquery.vidbacking.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.vidbacking.js"></script>

HTML结构

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

<video poster="screenshot1.jpg" autoplay muted loop class="vidbacking">
  <source src="video1.mp4" type="video/mp4">
  <source src="video1.webm" type="video/webm">
</video>

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

<div id="video-back">
  <video poster="screenshot1.jpg" autoplay muted loop class="vidbacking">
    <source src="video1.mp4" type="video/mp4">
    <source src="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

相关插件-音频和视频,背景

1:1模仿虾米音乐播放器,歌词与播放进度同步

能够很好地对歌词进行同步,1:1模仿虾米音乐播放器,希望有兴趣的朋友能够相互支持。
  音频和视频
 17404  131

jQuery HTML5音频视频库-jPlayer

jPlayer是完全自由和开放源码(MIT)用JavaScript编写的媒体库。一个jQuery的插件,(而现在的Zepto插件,) jPlayer可以让你快速编织跨平台的音频和视频到您的网页。jPlayer的全面的API允许你创建创新媒体解决方案。
  音频和视频
 21705  50

js音乐播放器

简洁的不行js音乐播放器插件
  音频和视频
 4176  40

视频播放插件Video.js

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )
  音频和视频
 1223378  753

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复