伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:媒体,UI-音频和视频,背景
 12350  101  查看评论 (3)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容10

Video Background Plugin

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

使用方法

在页面中引入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> 初始化伟德BETVICTOR在页面DOM元素加载完毕之后,可以通过vidbacking()方法来初始化该HTML5视频背景伟德BETVICTOR。/* 全屏HTML5视频背景 */ <script type="text/javascript">   $(function(){         $('body').vidbacking();   }); </script>   /* DIV元素内的HTML5视频背景 */ <script type="text/javascript">   $(function(){         $('#video-back').vidbacking();   }); </script
相关伟德BETVICTOR-音频和视频,背景

Html5 手机视频播放器自适应

Html5 手机视频播放器自适应
  音频和视频
 40627  195

js音频可视化伟德BETVICTORWavesurfer.js

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

jQuery音乐播放伟德BETVICTORjPlayer

简洁的音乐伟德BETVICTORjPlayer
  音频和视频
 14950  59

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

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

讨论这个项目(3)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    神经病 0
    2017/11/12 12:50:47
    这模板怎么插入背景音乐伟德BETVICTOR啊,懂得加我QQ291953346 回复
    alertz 0
    2017/10/26 16:38:35
    mac上Safari兼容性有问题啊。 回复
    李达康书记 0
    2017/10/26 14:00:40
    那masked这个参数是干什么用的呢? 我发现改成false后 屏幕上没有黑点了 回复
取消回复