扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
如果是要插入视频的插件的话推荐
创新互联2013年开创至今,先为梅江等服务建站,梅江等地企业,进行企业商务咨询服务。为梅江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
先下载jwplayer插件
引入插件JS文件
script src="js/jquery/jquery-1.6.2.js" type="text/javascript"/script
script src="js/plugins/mediaplayer-5.7/jwplayer.js" type="text/javascript"/script
JS中引入播放器
script type="text/javascript"
var thePlayer;
$(function() {
thePlayer = jwplayer('container').setup({
flashplayer: 'js/plugins/mediaplayer-5.7/player.swf',
file: 'js/plugins/mediaplayer-5.7/video.mp4',
width: 500,
height: 350,
dock: false
});
/script
或者直接采用video标签
HTML5Video-Speed-Controller插件怎么下载呢?大家百度一下可以自行下载,我这里给出一个链接,但是百度云链接很容易失效,失效了我也没办法了,大家自行下载吧。大家下载成功之后,将这个软件拖动到360浏览器的插件位置即可安装安装成功后,我们点击打开网页上的一个视频如图所示,就会出现这样一个小浮窗我们点击+或-就可以将视频加速或者减速了那么刚才安装的这款插件我们在哪呢,我们点击管理插件,就可以看到自己安装的这款插件了
看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级HTML5插件jquery-drawsvg就可以实现了,jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。
该SVG路径动画插件的特点有:
轻量级,压缩后小于2kb
使用简单
支持Easing过渡动画效果
演示地址:
插件下载地址:
使用方法:
使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。
script src="js/jquery.min.js"/script
script src="js/jquery.drawsvg.js"/script
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来使SVG图形生成轮廓线动画效果。
首先将初始化的对象实例保存为一个变量:
var mySVG = $('#my_svg_element').drawsvg();
然后就可以执行动画效果了:
mySVG.drawsvg('animate');
配置参数
下面是该SVG路径动画创建的可用配置参数:
参数类型默认值描述durationInteger1000完成每一个路径动画的持续时间staggerInteger200每一个路径动画开始前的延迟时间easingStringswing使用jQuery
Easing插件的过渡动画效果reverseBooleanfalse是否反向绘制callbackFunctionfunction()
{}路径动画完成之后的回调函数
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流