html5 实现video标签的自定义播放进度条
现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5-Video-Player</title>
<style type="text/css">
.videoPlayer{
border: 1px solid #000;
width: 600px;
}
#video{
margin-top: 0px;
}
#videoControls{
width: 600px;
margin-top: 0px;
}
.show{
opacity: 1;
}
.hide{
opacity: 0;
}
#progressWrap{
background-color: black;
height: 25px;
cursor: pointer;
}
#playProgress{
background-color: red;
width: 0px;
height: 25px;
border-right: 2px solid blue;
}
#showProgress{
background-color: ;
font-weight: 600;
font-size: 20px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="">
<h1>HTML5_Video_Player</h1>
<div class="videoPlayer" id="videoContainer">
<video id="video"
width="600" height="360"
preload controls
>
<source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type='video/mp4'>
<source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'>
</video>
<div id="videoControls">
<div id="progressWrap">
<div id="playProgress">
<span id="showProgress">0</span>
</div>
</div>
<div>
<button id="playBtn" title="Play"> 播放 </button>
<button id="fullScreenBtn" title="FullScreen Toggle"> 全屏 </button>
</div>
</div>
</div>
</div>
</body>
</html>
js代码：
// 为了不随意的创建全局变量，我们将我们的代码放在一个自己调用自己的匿名函数中，这是一个好的编程习惯
(function(window, document){
// 获取要操作的元素
var video = document.getElementById("video");
var videoControls = document.getElementById("videoControls");
var videoContainer = document.getElementById("videoContainer");
var controls = document.getElementById("video_controls");
var playBtn = document.getElementById("playBtn");
var fullScreenBtn = document.getElementById("fullScreenBtn");
var progressWrap = document.getElementById("progressWrap");
var playProgress = document.getElementById("playProgress");
var fullScreenFlag = false;
var progressFlag; // 创建我们的操作对象，我们的所有操作都在这个对象上。
var videoPlayer = {
init: function(){
var that = this;
video.removeAttribute("controls");
bindEvent(video, "loadeddata", videoPlayer.initControls);
videoPlayer.operateControls();
},
initControls: function(){
videoPlayer.showHideControls();
},
showHideControls: function(){
bindEvent(video, "mouseover", showControls);
bindEvent(videoControls, "mouseover", showControls);
bindEvent(video, "mouseout", hideControls);
bindEvent(videoControls, "mouseout", hideControls);
},
operateControls: function(){
bindEvent(playBtn, "click", play);
bindEvent(video, "click", play);
bindEvent(fullScreenBtn, "click", fullScreen);
bindEvent(progressWrap, "mousedown", videoSeek);
}
} videoPlayer.init(); // 原生的JavaScript事件绑定函数
function bindEvent(ele, eventName, func){
if(window.addEventListener){
ele.addEventListener(eventName, func);
}
else{
ele.attachEvent('on' + eventName, func);
}
}
// 显示video的控制面板
function showControls(){
videoControls.style.opacity = 1;
}
// 隐藏video的控制面板
function hideControls(){
// 为了让控制面板一直出现，我把videoControls.style.opacity的值改为1
videoControls.style.opacity = 1;
}
// 控制video的播放
function play(){
if ( video.paused || video.ended ){
if ( video.ended ){
video.currentTime = 0;
}
video.play();
playBtn.innerHTML = "暂停";
progressFlag = setInterval(getProgress, 60);
}
else{
video.pause();
playBtn.innerHTML = "播放";
clearInterval(progressFlag);
}
}
// 控制video是否全屏，额这一部分没有实现好，以后有空我会接着研究一下
function fullScreen(){
if(fullScreenFlag){
videoContainer.webkitCancelFullScreen();
}
else{
videoContainer.webkitRequestFullscreen();
}
}
// video的播放条
function getProgress(){
var percent = video.currentTime / video.duration;
playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
}
// 鼠标在播放条上点击时进行捕获并进行处理
function videoSeek(e){
if(video.paused || video.ended){
play();
enhanceVideoSeek(e);
}
else{
enhanceVideoSeek(e);
} }
function enhanceVideoSeek(e){
clearInterval(progressFlag);
var length = e.pageX - progressWrap.offsetLeft;
var percent = length / progressWrap.offsetWidth;
playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
video.currentTime = percent * video.duration;
progressFlag = setInterval(getProgress, 60);
} }(this, document))
html5 实现video标签的自定义播放进度条的更多相关文章
- HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang=" ...
- 解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5新增video标签及对应属性、API详解
知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- WPF仿网易云音乐系列（三、播放进度条+控制按钮）
一.简介 上一篇,咱们基本把左侧导航栏给搞定,这一篇文章,开始来做一下播放进度条和控制按钮:老规矩,咱们先来看一下原版的效果: 首先,它这个专辑图片,有一个按钮效果,鼠标移入会显示出伸缩箭头:移出后消 ...
- Android 自定义水平进度条的圆角进度
有时项目中需要实现水平圆角进度,如下两种,其实很简单 下面开始看代码,先从主界面布局开始看起: <?xml version="1.0" encoding=" ...
随机推荐
- EffectiveJava——类层次优于标签类
标签类: 有时候,可能会遇到带有两种甚至更多钟风格的类的实例的类,并包含表示实例风格的(tag)域.例如下面这个类,它能够表示圆形或者矩形: /** * 类层次优先与标签类 * @author wei ...
- 【poj 3080】Blue Jeans（字符串--KMP+暴力枚举+剪枝）
题意:求n个串的字典序最小的最长公共子串. 解法:枚举第一个串的子串,与剩下的n-1个串KMP匹配,判断是否有这样的公共子串.从大长度开始枚举,找到了就break挺快的.而且KMP的作用就是匹配子串, ...
- 由简入繁实现Jquery树状结构
在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...
- 基于java的socket编程
#开头的废话#学习java已经半个月了,原本在抠教材里面的字眼时,觉得教材好厚,要看完不知道要到猴年马月去了.突然在网上看到一个教程,里面老师说学编程语言书不用太细看,看个大概,知道里面讲些什么就好, ...
- Linux初学者指南
1.为啥我们要学习Linux? 我们干嘛要学习Linux? Linux能给我们带来什么价值呢? Linux给我的感觉就是稳定,免费,性能好. 稳定,体现在哪里?我们使用PC机,安装的操作系统一般是wi ...
- React入门--------组件API
setState 参数:nextState(object),[callback(function)] 设置nextState的某个键值.通常如果希望在某个事件或某个回调中来重新渲染组件,setStat ...
- swift学习笔记之-下标脚本
//下标脚本subscript import UIKit /*下标脚本(Subscripts) 下标脚本: 1.可以定义在类(Class).结构体(structure)和枚举(enumeration) ...
- javascript数组浅谈2
上次说了数组元素的增删,的这次说说数组的一些操作方法 join()方法: ,,] arr.join("_") //1_2_3 join方法会返回一个由数组中每个值的字符串形式拼接而 ...
- 读书笔记2014第6本：《The Hunger Games》
以前从未读过一本完整的英文小说,所有就在今年的读书目标中增加了一本英文小说,但在头四个月内一直没有下定决定读哪一本.一次偶然从SUN的QQ空间中看到Mockingjay,说是不错的英文小说,好像已经是 ...
- 解析plist文件（字典里包着数组，数组中又包含字典）
#import "RootTableViewController.h" #import "City.h" @interface RootTableViewCon ...