直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条

现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。

html代码：

HTML5-Video-Player

.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;

}

HTML5_Video_Player

width="600" height="360"

preload controls

>

0

播放

全屏

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的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码:

解决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   标签属性:src:音乐的URLpreload:预加载au ...

HTML5新增video标签及对应属性、API详解

知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

HTML5 Audio/Video 标签,属性,方法,事件   标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

[转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

HTML5 Audio/Video 标签,属性,方法,事件汇总 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

WPF仿网易云音乐系列(三、播放进度条+控制按钮)

一.简介 上一篇,咱们基本把左侧导航栏给搞定,这一篇文章,开始来做一下播放进度条和控制按钮:老规矩,咱们先来看一下原版的效果: 首先,它这个专辑图片,有一个按钮效果,鼠标移入会显示出伸缩箭头:移出后消 ...

Android 自定义水平进度条的圆角进度

有时项目中需要实现水平圆角进度,如下两种,其实很简单     下面开始看代码,先从主界面布局开始看起: <?xml version="1.0" encoding=" ...

随机推荐

AD10的PCB设计规则

PCB布线规则,布板需要注意的点很多,但是基本上注意到了下面的这此规则,LAYOUT PCB应该会比较好,不管是高速还是低频电路,都基本如此. 1. 一般规则 1.1 PCB板上预划分数字.模拟.DA ...

MVC 之 Partial View 用法

Partial View 顾名思义就是Html代码片段,因此可以用Partial View 把部分的Html或显示逻辑包装起来,方便多次使用. Partial View 需要放在Views ...

Content Providers

Content providers manage access to a structured set of data. They encapsulate the data, and provide ...

C&plus;&plus;編程札記「基礎」

一直以為自己最擅長的編程語言是C++,那時自己的水平停留在使用C++來實現數據結構中的各種ADT和ACM算法. 創建一個類,必須實現的成員函數 explicit構造函數 對於單參數構造函數,添加exp ...

js创建及操作数组

一:创建数组 1:使用Array构造函数(new可以省略): var colors = new Array();创建length值为20的的数组: var colors = new Array(20) ...

&period;NET Framework 各版本区别(简介)

本文通过在网络资料整理而得. .NET Framework1.1 1.自带了对mobile asp.net控件的支持.(在1.0版本是以附加功能实现) 2.加入了ASP.NET应用程序的代码安全访问功 ...

机器学习——logistic回归，鸢尾花数据集预测，数据可视化

0.鸢尾花数据集 鸢尾花数据集作为入门经典数据集.Iris数据集是常用的分类实验数据集,由Fisher, 1936收集整理.Iris也称鸢尾花卉数据集,是一类多重变量分析的数据集.数据集包含150个数 ...

C&plus;&plus;&lowbar;day8pm&lowbar;多态

1.什么是多态 2. 示例代码: #include using namespace std; //形状:位置.绘制 //+--圆形:半径.(绘制) //+--矩形:长 ...

原生js的开发笔记

1.基本的dom操作 var a=document.getElementById('ma1').innerHTML;/获取html代码 alert(document.getElementById('m ...

mysql查询某一个字段是否包含中文字符

在使用mysql时候,某些字段会存储中文字符,或是包含中文字符的串,查询出来的方法是: SELECT col FROM table WHERE length(col)!=char_length(col ...