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=" ...
随机推荐
- jsp iframe example
1. jsp中用iframe的方式在body中展示列表, 可以通过父元素的宽.高来设定iframe的宽高. <div class="wrapper" style=" ...
- Web Service（一） 基础学习
1 基础的Web Service平台是XML+HTTP. 2 Web Service平台的元素包括:SOAP(Simple Object Access Protocol)简单对象访问协议: UDDI( ...
- Webform（Repeater控件）
一.Repeater控件 有五大模板 ItemTemplate :有多少条数据,执行多少遍 AlternatingItemTemplate : 对交替数据项进行格式设置 Se ...
- [js开源组件开发]js文本框计数组件
js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...
- 关于ol有序裂变和ul无序列表前面的列表项标记的位置
使用列表项标记的时候发现其对齐方式竟然从内容开始,于是发现了这个属性可以解决: list-style-position inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐. outsid ...
- 更换SAP主界面右边区域背景主题
1) Tcode:SMW0(注意,最后面是零,不是英文字母O),选择第二个单选按钮 2)点击回车后,直接点击运行按钮. 3)在SAP WEB 资源库:对象显示 页面,点击:新建 4)创建对象名称,名 ...
- Force.com微信开发系列（八）生成带参数的二维码
为了满足用户渠道推广分析的需要,公众平台提供了生成带二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送.目前有两种类型的二维码,分别是临时二维码和永久二维码 ...
- Struts2(十五)实现文件上传
一.导入包 需要将commons-fileupload和commons-io包和struts包一起导入 实现步骤: 在Jsp页面实现客户端选择上传文件 配置Struts.xml,拦截器会自动接收上传的 ...
- android学习笔记 对话框合集
package com.zhangbz.dialog; import android.app.Activity; import android.app.AlertDialog; import andr ...
- 设计模式-01-MVC
概述 Model-View-Controller(MVC),即模型-视图-控制器. MVC将软件系统分成三大部分:Model,View,Controller,三个部分通过某种机制通信 M.V.C的职能 ...