jQuery html5背景视频插件vidbacking

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

 63299  502  查看评论 (15)
分享到微信朋友圈
X
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

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

简单的jQuery音乐播放器

简单的jQuery音乐播放器,带分享
  音频和视频
 33310  336

音乐歌词同步播放器

jplayer实现歌词同步的JS音乐播放器效果
  音频和视频
 42319  380

js音频可视化插件Wavesurfer.js

Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波
  音频和视频
 61327  347

jQuery视频弹窗插件

样式已经写好,使用方法也简单。
  音频和视频
 64490  466

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ss5xhn 0
    2021/5/21 22:05:53
    更改了视频素材,但是视频不动了,更改格式也不行,这是视频本身的问题么 回复
    ???????? 0
    2020/3/7 21:38:20
    谷歌浏览器只有画面无声音 回复
    Arvinss 0
    2019/11/1 15:29:18
    和fullpage起冲突不能播放怎么解决
    回复
    网站建设-软件系统开发 0
    2019/10/21 15:30:27
    不能自动播放声音,强制播放,视频就不播放了。请问怎样自动播放声音 回复
    哈雷 0
    2019/7/24 10:57:59
    目前测试 chrome 可以正常播放 回复
    多啦C梦 0
    2019/5/19 10:59:03
    进口小祖宗 0
    2018/6/14 10:33:24
    为什么我放MP4格式的视频进去没有声音?
        dnawo1
        2019/10/17 23:26:43
        现在都得手工点击取消静音才行,$('#video1')[0].muted = false;
    回复
    Eddie 0
    2018/3/26 9:39:09
    苹果本上的safari不显示视频啊,和那个兄弟说的一模一样 回复
    听…狗叫的声音 0
    2018/3/21 15:05:49
    怎么没有视频播放啊 ,一直黑色背景
        西瓜0
        2018/3/21 15:23:57
        可以播放,视屏格式用的.3gp.需要chorme浏览器才可以正常播放,需要别的浏览器也可以播放的话,改成.mp4格式就行了。
    回复
    神经病 0
    2017/11/12 12:50:47

    这模板怎么插入背景音乐插件啊,懂得加我QQ291953346

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复