h5+js视频播放器控件
由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面，去兼容不同的浏览器。
只插入一个视频时，浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件；
下面是一个自制播放控件的小练习，比较粗糙，很多功能有待完善。
制作中可能用到的一些常见属性和内容：
1.标签<video></video>
2.常用属性：
autoplay--自动播放；
controls--显示音乐控件；
loop--实现循环播放；
poster--视频加载未开始时播放的图片；
3.video支持多视频格式：（以此解决不同浏览器对视频格式的兼容问题）
<video poster="img/oceans-clip.png">
<source src="video/oceans-clip.mp4"></source>
<source src="video/oceans-clip.webm"></source>
<source src="video/oceans-clip.ogv"></source>
</video>
4.获取当前视频播放的状态：
playbtn(对象).onclick=function(){
if(video.paused){
video.play();
}else{
video.pause();
}
}
5.视频的一些特殊事件：
1）当视频可以播放获取总时间：
vdideo.oncanplay=function(){
console.log(video.duration);
}
2）视频播放时，获取实时时间：
video.ontimedate=function(){
console.log(video.currentTime);
}
3）视频结束：
video.onended=function(){
}
实现后的样式：
代码如下，希望大家提出宝贵意见。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频</title>
<style type="text/css">
input,body,div{
margin: 0;
padding: 0;
}
input{
display: inline-block;
width: 30px;
height: 30px;
background-size: 30px;
float: left;
}
#control{
width: 620px;
height: 30px;
background-color: #222;
margin-top: -8px;
padding: 5px 10px;
clear: both;
/*position: absolute;
top:300px
left: 100px;*/
}
#jdt{
margin: 10px 5px 0 5px;
width: 400px;
height: 10px;
float: left;
}
span {
display: inline-block;
color: #fff;
float: left;
margin: 6px 5px 0 5px;
font: 14px "微软雅黑";
}
#box1{
margin:50px auto;
width: 615px;
height: 305pc;
/*position: relative;*/
}
#playbnt{ }
</style>
</head>
<body>
<div id="box1">
<video poster="img/oceans-clip.png">
<source src="video/oceans-clip.mp4"></source>
<source src="video/oceans-clip.webm"></source>
<source src="video/oceans-clip.ogv"></source>
</video>
<div id="control">
<input type="image" value="" id="playbnt" src="img/on.png"/>
<meter id="jdt" min="0" max="100"></meter>
<span id="timeone">00:00:00</span>
<span>/</span>
<span id="timeall">00:00:00</span>
<input type="image" value="" id="fullbnt" src="img/expand.jpg"/>
</div>
</div>
<script type="text/javascript">
var playbnt=document.getElementById("playbnt");
var fullbnt=document.getElementById("fullbnt");
var video=document.querySelector("video");
var box1=document.getElementById("box1");
//播放按钮
playbnt.onclick=function(){
if(video.paused){
video.play();
playbnt.src="img/pause.png";
}else{
video.pause();
playbnt.src="img/on.png";
}
}
//点击进入全屏（注意兼容）
fullbnt.onclick=function(){
if(document.fullscreenElement||document.webkitFullscreenElement||document.mozCancelFullScreen||document.msFullscreenElement){
if(document.cancelFullscreen){
document.cancelFullscreen();
}else if(document.webkitCancelFullscreen){
document.webkitCancelFullscreen();
}else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}else if(document.msExitFullscreen){
document.msExitFullscreen();
}
}else{
if(video.requestFullscreen){
video.requestFullscreen();
}else if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.msRequestFullscreen){
video.msRequestFullscreen();
}
}
}
//实时获取时间
var timh=0;
var timm=0;
var tims=0;
var all=null;
var one=null;
var timeone=document.getElementById("timeone");
var jdt=document.getElementById("jdt");
video.ontimeupdate=function(){
var t=Math.floor(video.currentTime);
ont=t;
timh=t/3600;
timm=t%3600/60;
tims=t%60;
// console.log(t);
if(t<10){
timeone.innerHTML="00:00:0"+tims;
}else if(10<t<60){
timeone.innerHTML="00:00:"+tims;
}else if(60<t<600){
timeone.innerHTML="00:0"+timm+":"+tims;
}
else if(600<t<3600){
timeone.innerHTML="00:"+timm+":"+tims;
}else if(3600<t<36000){
timeone.innerHTML="0"+timh+":"+timm+":"+tims;
}else if(t>36000){
timeone.innerHTML=timh+":"+timm+":"+tims;
} jdt.value=(t/all)*100;
}
//获取总时间
video.oncanplay=function(){
var t=Math.floor(video.duration);
all=t
timh=t/3600;
timm=t%3600/60;
tims=t%60;
// console.log(t);
if(t<10){
timeall.innerHTML="00:00:0"+tims;
}else if(10<t<60){
timeall.innerHTML="00:00:"+tims;
}else if(60<t<600){
timeall.innerHTML="00:0"+timm+":"+tims;
}
else if(600<t<3600){
timeall.innerHTML="00:"+timm+":"+tims;
}else if(3600<t<36000){
timeall.innerHTML="0"+timh+":"+timm+":"+tims;
}else if(t>36000){
timeall.innerHTML=timh+":"+timm+":"+tims;
}
} //视频结束时进度条
video.onended=function(){
playbnt.src="img/on.png";
timeone.innerHTML="00:00:00";
video.currentTime=0;
}
//单击进度条
var jdtl=jdt.offsetLeft;
var jdtw=jdt.offsetWidth;
jdt.onclick=function(event){
// console.log(all);
var onex=Math.floor((event.clientX-jdtl));//点击坐标到进度条左端距离
console.log("鼠标单击坐标:"+event.clientX);
// console.log(jdtl);
var allx=Math.floor(jdtw); //进度条的宽度
var x=onex/allx;
console.log("单击坐标-left="+onex);
console.log("进度条宽度="+allx);//百分比
console.log("百分比="+x);
video.currentTime=Math.floor(all*x); //实时时间=总时长*百分比
console.log("实时时间="+all*x);
} </script>
</body>
</html>
附:css画play按钮
//less
.play {
width: 68px;
height: 68px;
border-radius: 34px;
-webkit-border-radius: 34px;
-moz-border-radius: 34px;
border: solid 2px rgba(251, 251, 251, 1);
position: absolute;
top: 44%;
left: 50%;
margin: -17px 0 0 -27px;
-webkit-transition: all 200ms linear;
cursor: pointer;
i {
margin: 20px 27px 27px 26px;
display: inline-block;
border-width: 12px 0px 12px 20px;
border-color: transparent #fff transparent #fff;
border-style: solid;
width: 0;
height: 0;
}
}
h5+js视频播放器控件的更多相关文章
- 使用VideoView自定义一个播放器控件
介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...
- JS数量输入控件
JS数量输入控件 很早看到kissy首页 有数量输入控件,就随便看了下功能 感觉也不怎么难 所以也就试着自己也做了一个, 当然基本的功能和他们的一样,只是用了自己的编码思想来解决这么一个问题.特此给大 ...
- h5 的video视频控件
h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...
- H5 video自定义视频控件
1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- IOS的segmentedControl(分段器控件)的一些常用属性
#pragma mark - 创建不同的分段器 //初始化方法:传入的数组可以是字符串也可以是UIImage对象的图片数组 UISegmentedControl *mysegmented = [[UI ...
- 用js给html控件赋值
用js给html控件赋值 <script> window.onload=function setValue()//在页面加载时赋值 { document.getElementById( ...
- SWF加载器控件 SWFLoaderControl
SWF加载器控件 书:165 <?xml version="1.0" encoding="utf-8"?> <s:Application xm ...
- 2.23 js处理日历控件（修改readonly属性）
2.23 js处理日历控件(修改readonly属性) 前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...
- ADF控件ID变化引发JS无法定位控件的解决方法
原文地址:ADF控件ID变化引发JS无法定位控件的解决方法作者:Nicholas JSFF定义的控件ID到了客户端时往往会改变.例如在JSFF中的一个的ID为"ot1",但是当这个 ...
随机推荐
- eclipse的这几个小玩意
scroll lock 滚动锁定 word wrap 自动换行 show console when standard out changes 标准输出更改时显示控制台 show cons ...
- NumPy 学习笔记（一）
NumPy: 1.NumPy 是一个功能强大的第三方库(需要自己安装),主要用于对多维数组执行计算: 它提供了大量的库函数和操作,可以帮助程序员更轻松地进行数值计算 2.可以和另外两个第三方库 S ...
- 一、activiti工作流(workflow)入门介绍
activiti官方网站(官网通常很卡,不建议看,直接看我教程就行) http://www.activiti.org/ eclipse离线安装activiti插件并下载教程 https://downl ...
- API接口开发（持续更新）
1. 接口调用失败时的处理方式 接口调用失败时分为 请求失败和业务失败. 请求失败的相关信息可通过HTTP状态码体现出来, 业务失败的相关信息需要在返回数据中体现出来. 2. 分页查询 批量查询时需要 ...
- app测试之专项测试
专项测试包含很多东西,安装.升级.卸载.性能.安全.网络.随机等等,这些都属于专项测试 一个app的正常到用户手里使用,功能是最基础的测试,专项测试测试主要的. 下面介绍一些常用的专项测试: 1.多任 ...
- .Net #if DEBUG调试模式代码使用
#if DEBUG Console.WriteLine("DEBUG:11111111111"); #else Console.WriteLine(" ...
- ubuntu16.04 Docker默认存储路径修改
Ubuntu 16.04 Docker默认存储路径修改
- sql server 性能调优之 资源等待SOS_SCHEDULER_YIELD
一.概念 SOS_SCHEDULER_YIELD等待类型是一个任务自愿放弃当前的资源占用,让给其他任务使用. 这个等待类型与CPU有直接关系,与内存与也有间接关系,与CPU有关系是因为在sql s ...
- Js中处理日期加减天数
Js的处理日期还是很方便的. 一. 格式化日期为2017-07-04的格式 function formatTime(date) { var year = date.getFullYear(); var ...
- XSS漏洞解析(一)
以前写程序没有怎么关注这些网络安全问题,随着自己写的程序越来越多,开始关注了网络安全了. 一.什么是XSS XSS(Cross-Site Scripting) 跨站脚本是一种经常出现在web应用程序的 ...