jquery设置video的宽度_jQ效果:jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件。
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.
实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!
HTML5 Video 基础标签
sourcesrc="video.mp4"type="video/mp4" />
="video.webm"="video/webM" ="video.ogv"="video/ogg" p>Your browser does not support the video tag.>
video>
幸运的是HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介.
在编码之前让我简单的介绍一下jQuery是如何获取video标签的.
在JavaScript中我们使用getElementById('videoID')来获取Video标签,作为结果,我们会获取到一个Dom对象.但是这不是等价的jQuery对象.$("videoID")会返回一个jQuery对象.不是Dom对象.这就是为什么在将其转换为Dom对象之前我们不能直接使用jQuery选择器调用/使用Html5 Video的Dom属性和功能.
//return a DOM object
var video = document.getElementById('videoID'); or
var video = $('#videoID').get(0); var video = $('#videoID')[0];return a jQuery object
var video = $('#videoID');
Video Play/Pause Controls 播放/暂停 按钮
好的,这是所有的介绍.现在让我们来编码.首先,我们要创建一个简单的播放/暂停按钮.
divclass="control"ahref="#"class="btnPlay">Play/Pauseadiv>
我们可以轻松的控制Html5 Video的播放与暂停状态.
Play/Pause control clicked
$('.btnPlay').on('click',function() {if(video[0].paused) {
video[0].play();
}else{
video[0].pause();
}return false;
};
显示视频播放时间和持续时间
Html5 Video支持视频回放.这里我们要显示视频的当前播放时间和总时间.
="progressTime">Current play time:span="current">
为了得到视频的总时间,我们要确保视频元数据已经加载.这个时候我们要用到Html5 Video的loadedMetadata事件.
对于当前的视频播放时间.我们可以用Html5 Video timeupdate事件来保证他的更新.
get HTML5 video time duration
video.on('loadedMetadata',1)">() {
$('.duration').text(video[0].duration);
});update HTML5 video current play time
video.on('timeupdate',1)">() {
$('.current').text(video[0].currentTime);
});
视频进度条
在这里我们将会把当前播放时间和总的时间长度转换为更人性化的进度条.
style>.progressBar{position:relative;width100%heightheight:10pxbackgroud-color#000;
}.timeBarabsolutetop0leftbackground-color#ccc}
="progressBar"="timeBar">
下面的js就是通过视频的总时间与当前时间的计算,获得播放进度条。
].duration));
});() {var currentPos = video[0].currentTime; Get currenttime
var maxduration = video[0].duration; Get video duration
var percentage = 100 * currentPos / maxduration; in %
$('.timeBar').css('width',percentage+'%');
});
下面实现播放进度条的拖拽,来播放视频
var timeDrag = false; /*Drag status*/$('.progressBar').mousedown((e) {
timeDrag= true;
updatebar(e.pageX);
});
$(document).mouseup((e) {if(timeDrag) {
timeDrag= ;
updatebar(e.pageX);
}
});
$(document).mousemove((timeDrag) {
updatebar(e.pageX);
}
});update Progress Bar control
var updatebar = (x) {var progress = $('.progressBar');Video duraiton
var position = x - progress.offset().left; Click pos
var percentage = 100 * position /progress.width();Check within range
if(percentage > 100) {
percentage= 100;
}if(percentage < 0) {
percentage= 0;
}Update progress bar and video currenttime
$('.timeBar').css('width',1)">);
video[0].currentTime = maxduration * percentage / 100;
};
进阶-显示缓冲栏
我们需要给视频制作一个缓冲栏让用户知道视频加载了多少.
.progressBarpositionwidthheightbackgroud-color.bufferBartopleftbackground-color>
="bufferBar">
Html5 Video缓冲属性将返回一个对象的缓存范围.因此,我们将使用缓存数据的最后一个值.
loop to get HTML5 video buffered data
var startBuffer = var maxduration = video[0].duration;var currentBuffer = video[0].buffered.end(0);var percentage = 100 * currentBuffer /maxduration;
$('.bufferBar').css('width',1)">);if(currentBuffer
setTimeout(startBuffer,500);
}
};
setTimeout(startBuffer,500);
音量控制
现在,我们要增加声音控制.有两种不同的音量控制方法.静音按钮/音量栏
="muted" >Mute/Unmute="volumeBar"="volume">
js:
Mute/Unmute control clicked
$('.muted').click(() {
video[0].muted = !video[0].muted;;
});Volume control clicked
$('.volumeBar').on('mousedown',1)">(e) {var position = e.pageX -volume.offset().left;volume.width();
$('.volumeBar').css('width',1)">);
video[0].volume = percentage / 100;
});
快进/快退 倒带控制
Html5 Video支持播放速度的改变.我们可以使用playbackrate属性来控制.
="ff">Fast Forward="rw">Rewind="sl">Slow Motion>
不幸的是FireFox不支持playbackrate属性.以及有些版本的chrome浏览器不支持负值(倒带).到目前为止,只有Safri浏览器完全支持.
/Fast forward control
$('.ff').on('click',1)">() {
video[0].playbackrate = 3;Rewind control
$('.rw').on('click',1)">() {
video[0].playbackrate = -3Slow motion control
$('.sl').on('click',1)">() {
video[0].playbackrate = 0.5;
});
其他
除了主要的控制插件.还可以做一些额外的控制.例如全屏播放
$('.fullscreen').on('click',1)">For Webkit
video[0].webkitEnterFullscreen();For Firefox
video[0].mozRequestFullScreen();;
});
开灯关灯控制
$('.btnLight').click(if($(this).hasClass('on')) {
$(this).removeClass('on');
$('body').append('
$('.overlay').css({'position':'absolute','width':100+'%':$(document).height(),'background':'#000''top':0'z-index':999});
$('#myVideo').css({'z-index':1000});
}{
$(this).addClass('on').remove();
};
});
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入交流1群:1065694478(已满)交流2群:163560250
jquery设置video的宽度_jQ效果:jQuery和css自定义video播放控件相关推荐
- H5自定义video播放控件,播放暂停使用图标
大家都知道vedio的contorls属性可以将video的控件显示出来,包括播放.暂停.进度条.声量控制.全屏显示等.但是出于需求,往往需要将某些控件外形变成我们想要图标(但功能一样),而不是全部使 ...
- html5--移动端视频video的android兼容,去除播放控件、全屏等
android下html5的视频播放一直是前端兼容的重灾区,各种体验差,被诟病已久.但之前的故宫穿越H5,和吴亦凡入伍H5,利用的视频技术,貌似又给人一种新面貌. 前段时间做某项目,恰好也是一个类似视 ...
- uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
- jquery设置video的宽度_使用jQuery和CSS自定义HTML5 Video 控件 简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
- android自定义控件几种,Android 自定义View一个控件搞定多种水波纹涟漪扩散效果 - CSDN博客...
效果图 实现思路 这个效果实现起来并不难,重要的是思路 此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化 根据上面的样式,可以看出此View需要满足以下变化 圆圈从中心可循环向外扩散 ...
- android触摸效果,Android开发进阶:仿MIUI12控件触摸反馈效果(下沉+倾斜)附源码...
简单模仿了下MIUI12里控件的触摸反馈效果,转载请标明出处 效果简述 按压控件内圈区域,控件整体缩小,高度降低(阴影消失) 按压内圈 按压控件外圈区域,依据触摸点控件以中心为支点,向触摸点倾斜 按压 ...
- Qt Designer设置背景图片、颜色不影响其它组件小技巧,控件层级设置,组件的继承,styleSheet设置样式。
话不多说,先看效果图,完美的设置背景. 如果正常设置背景的话其它的组件都会产生变化. 这是因为组件的继承. 最开始的面板就是父类,我们新增加的组件就是子类,默认都是继承的. 继承也有继承的好处. 比如 ...
- CSS设置下划线对齐方式,如何巧妙利用CSS自定义网页下划线样式
如何巧妙利用CSS自定义网页下划线样式 CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段.但是,或许你可能注意到了,对于下划线,CSS提供的可选操作却不是很多.一般情况下,人们看到的下 ...
- css字体大小随控件,GitHub - Luren3/CssTextView: 这是基于TextView的扩展小控件,一个支持设置一段文字设置不同的颜色、大小、字体样式以及点击事件...
设置文本内容其中文字的颜色 text文字 color颜色 startIndex开始位置 OnClickSpan点击事件 setTextArrColor(String text, int color) ...
最新文章
- python if __name__ == '__main__'
- [问答]-ARM文档中的†和‡的含义
- Mavan的配置,以及与IDEA版本不一致,解决办法
- Websockets与Spring 4
- 低压抽屉柜常见故障处理方法_低压配电设备常见故障分析,处理办法介绍
- 教主们:虽然这道题我不会,但Ac还是没问题的。
- html 图片自由缩放_PS中的“缩放”
- Luogu P1407 [国家集训队]稳定婚姻 (二分图写法)
- 如何快速掌握man手册的使用
- opencv ubuntu 汉字_ubuntu下没有中文输入法的解决办法
- 安卓 java 视频_安卓实战项目-动态桌面-rxjava实现搜索本地所有视频
- BZOJ2563: 阿狸和桃子的游戏 贪心
- 蒙特卡洛方法到底有什么用(两个案例说明)
- 任泽平:中国自动驾驶发展报告2020(上)
- html实现word分页符,word分页-解析Word——自动分页符与手动分页符
- React 脚手架使用
- 陀螺仪加速度计MPU6050
- 数据库原理-并发控制(2-封锁)
- Android自定义相机
- 获取员工其当前的薪水比其manager当前薪水还高的相关信息--2-5
热门文章
- 移动优惠套餐到期了怎么办?这两种方法大家了解一下!
- linux关闭后台运行命令,linux后台运行、关闭、查看后台任务常用命令
- Google网站管理员工具提示软404错误解决方法
- Android 命令su,获取Android的ROOT权限其实很简单,只要在Runtime下执行命令su就可以了。复制代码 代码如下:// 获取ROOT权限public void...
- 卷积操作中的same padding与valid padding
- Docker之nginx部署
- python读取文件按行分割字符串_python在TXT文件中按照某一字符串取出该字符串所在的行方法...
- 硬笔书法“锻”字这样写,想写不好都很难!
- 服务器如何显示玩家玩了多久,最有成就感的游戏!玩家只要努力,就能控制整个服务器!为所欲为...
- 支持UEFI的原装win10安装U盘制作教程