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",但是当这个 ...
随机推荐
- Retrofit官方文档翻译
Retrofit官方文档翻译 官方文档网址 http://square.github.io/retrofit/ 介绍 Retrofit 将你的 HTTP API 转换为 Java 接口. public ...
- 漫谈PHP组件、框架、Composer那些事
什么是组件 组件是一组打包的代码,是一系列相关的类.接口和Trait,用于帮助我们解决PHP应用中某个具体问题.例如,你的PHP应用需要收发HTTP请求,可以使用现成的组件如guzzle/guzzle ...
- 第74节：Java中的Cookie和Session
第74节:第74节:Java中的Cookie和Session ServletContext: 什么是ServletContext,有什么用哦,怎么用呢? 启动服务器后,会给每个应用程序创建一个Serv ...
- Enum扩展特性，代替中文属性
由于对英语的天生缺陷,在枚举时一直使用中文,这样就不用看注释就知道枚举意思,今天看到博文 https://www.cnblogs.com/emrys5/p/Enum-rename-htmlhelper ...
- git小技巧
1 git提交时如何忽略一些文件: 在git根目录下添加,然后提交,就可以使用了,详细的语法详见 https://github.com/github/gitignore github提供了一个通用的. ...
- Python - 浅谈Python的编译与反编译
1 - Python编译过程涉及的文件 py 源代码文件,由python.exe解释,可在控制台下运行,可用文本编辑器进行编辑: pyc 源代码文件经过编译后生成的二进制文件,无法用文本编辑器进行编辑 ...
- Express中间件的意思 next()的方法
一.什么是express?Express是一个简洁.灵活的noode.jsWeb应用开发框架,它提供一系列强大的特性,帮助你创建各种Web和移动设备应用.Express项目的底层由许多的中间件在协同工 ...
- spring boot -junit单元测试方法示例
package com.example.zs; import com.example.zs.mapper.UserMapper; import com.example.zs.pojo.User; im ...
- 改造kindeditor支持asp.net core mvc上传文件
kindtor默认使用的上传方法是使用目录下面的一般处理程序upload_json.ashx,暂时还不支持asp.net core下的文件上传,下面放出的自定义处理上传文件的接口方法. 自定义接收上传 ...
- 容器、容器集群管理平台与 Kubernetes 技术漫谈
原文:https://www.kubernetes.org.cn/4786.html 我们为什么使用容器? 我们为什么使用虚拟机(云主机)? 为什么使用物理机? 这一系列的问题并没有一个统一的标准答案 ...