以前我们在网页上播放视频,都是要麻烦flash来实现。看着那一大段的<object>真心觉得累。随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要把界面打造的更加个性一点,需要一点javascript和一点css.如果能再加一个漂亮的美工,那就完全不在话下了。在项目早些时候

我们是通过phoneGap提供的插件实现的视频播放,但是有一个问题,翻页的时候,视频没有跟着一起动,感觉就是脱离了页面。后来采用video

来播放就可以一起移动了,但是它的默认样式与我们的项目风格太不协调了。于是我就查了一下video的api 进行了自定义。具体代码稍后贴出,也可以从我的git上下载。

下面展示一下效果:

界面有点简单,甚至可以说比较丑。这只能说美工不给力,但是作为一个demo,我想控制的

开关,进度条,时间等,都可以进行自定义,这就足够了。如果你觉得有兴趣,不妨看下后面的源码,超级

简单:

 (function(){
var video = document.querySelector('video');
var VideoBox = video.parentNode.children[1]; var mediaLength = 500;
var pauseTime = 0; //播放事件
var play = function() {
video.play();
powerBtn.className = 'StopControl';
timeSpan();
} //暂停事件
var pause = function() {
video.pause();
powerBtn.className = 'MainControl';
pauseTime = video.currentTime;
} /*开关按钮*/
var powerBtn = VideoBox.children[0];
/*监听开关事件*/
powerBtn.addEventListener('click',function(e){
video.paused ? play() : pause();
},false); //进度条
var DomProcess = VideoBox.children[1].children[1];
//进度条长度增加
DomProcess.addEventListener('click',function(e){
var left = this.getBoundingClientRect().left;
var length = e.clientX - left;
durationProcessRange(length / mediaLength);
},false); //进度条长度减少
var DomProcessYet = VideoBox.children[1].children[2];
DomProcessYet.addEventListener('click',function(e){
var left = this.getBoundingClientRect().left;
var length = e.clientX - left;
durationProcessRange(length / mediaLength);
},false); //响应播放进度条变化
function durationProcessRange(rangeVal) {
video.currentTime = rangeVal * video.duration;
video.play();
} //监听播放完成事件
video.addEventListener('ended', function () {
powerBtn.className = 'MainControl';
},false); //时间进度处理程序
function timeSpan() {
var total = timeDispose(video.duration);
var ProcessYet = 0;
setInterval(function () {
var ProcessYet = (video.currentTime / video.duration) * mediaLength; DomProcessYet.style.width = ProcessYet + 'px';
var currentTime = timeDispose(video.currentTime);
var SongTime = VideoBox.children[1].children[0];
SongTime.innerHTML = currentTime + "&nbsp;|&nbsp;" + total;
}, 1000);
} //时间处理,因为时间是以s为单位算的,所以这边执行格式处理一下
function timeDispose(number) {
var minute = parseInt(number / 60);
var second = parseInt(number % 60);
minute = minute >= 10 ? minute : "0" + minute;
second = second >= 10 ? second : "0" + second;
return minute + ":" + second;
} })();

不过由于安卓上对video的实现不是很完整,还是保留了用phoneGap播放,苹果和PC采用video播放。

需要指出的是,苹果上的iphone是不允许我们对video的界面元素进行控制的,只能用默认的风格。

此外呢,html5的video元素,对视频格式也有要求,具体查看w3c的说明文档。

有兴趣尝试一下的,可以自己写或从以下地址下载源码:

https://github.com/bjtqti/xxt/tree/master/html5

另外有一个叫videojs的网站上,有完整的实现。只是体积太大,不介意的可以直采用。

用javascript做一个视频播放器的更多相关文章

  1. 做一个视频播放器在没开始播放的时候有一张图片实际上就是拿一张图片盖住视频承载的屏幕当出发。play的时候图片隐藏 img

    saxda 某个元素.style.class='';也可以是.className <!DOCTYPE html><html lang="en"><he ...

  2. Android 音视频深入 十九 使用ijkplayer做个视频播放器(附源码下载)

    项目地址https://github.com/979451341/Myijkplayer 前段时候我觉得FFmpeg做个视频播放器好难,虽然播放上没问题,但暂停还有通过拖动进度条来设置播放进度,这些都 ...

  3. 记一个视频播放器插件 video.js

    最近在看扣丁学堂上面的一些视频, 突然对他用的视频播放器有点兴趣, 他也是采用的 ts切片播放, 如果使用传统的video标签是无法实现的 他使用的插件叫做 video.js 官网地址 官网提供的播放 ...

  4. html,CSS,javascript 做一个弹窗

    弹窗的工作原理:在网页中写一个div ,布局到想要显示的位置,将display设为none,隐藏该div.然后通过点击事件或其他操作,利用Js代码,将display设置为block,将div 显示到网 ...

  5. 如何用JavaScript做一个可拖动的div层

    可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...

  6. C#调用VlcControl做一个播放器

    开发环境: Visual Studio 2015 .Net Framework 4.5 1.新建一个Windows窗体应用程序 修改框架为.Net Framework 4.5 2.管理NuGet包 下 ...

  7. 用Javascript做一个“获取验证码”的按钮

    要求:①点击按钮后背景色会发生改变②有倒计时(一般为30秒) <!DOCTYPE HTML> <html> <head> <meta charset=&quo ...

  8. 用JavaScript做一个小小设计

    这个项目是我无聊时完成的,参阅过很多大神的示例,其实方法并不难主要是js和css样式的设计,我发现自己还有很多的js代码写不出来更加不用提看的明白了,(PS吐槽一下:革命尚未成功,同志还需努力啊!)此 ...

  9. HTML5,CSS3 与 Javascript 制作视频播放器

    早一段时间,有一直研究 HTML5 和 CSS3 ,自己也做了不少 Demo ,只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器,因此特别想做一个自己喜欢的设计,考虑 ...

随机推荐

  1. web前端基础篇⑤

    1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...

  2. 每日一九度之 题目1042:Coincidence

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3007 解决:1638 题目描述: Find a longest common subsequence of two strings. 输入 ...

  3. cacti 添加

    一,为已有host添加新的监控图 (基于snmp) 在console控制台下点击“New Graphs”,选择要添加监控图的主机.在Graph Templates中选择一个Graph模板,本例选择SN ...

  4. mysql 高可用方案MHA介绍

    概述 MHA是一位日本MySQL大牛用Perl写的一套MySQL故障切换方案,来保证数据库系统的高可用.在宕机的时间内(通常10—30秒内),完成故障切换,部署MHA,可避免主从一致性问题,节约购买新 ...

  5. jquery.editable-select 可编辑下拉框之获取select值和input值

    使用jquery.editable-select可以实现可编辑下拉框的功能,但需要先导入jquery.js,jquery.editable-select.css,jquery.editable-sel ...

  6. selenium-自动化用例(十一)

    思路 将页面操作与用例case分别封装,编写case时就可以用同一个操作方法对应多个case 如下图: PageGUI:存放页面操作方法,每个页面写一个文件,每个文件中写同一个页面不同的操作,例如检索 ...

  7. C语言解决约瑟夫问题详解的代码

    将开发过程中比较重要的一些内容做个收藏,下面的内容是关于C语言解决约瑟夫问题详解的内容,希望能对码农有帮助. #pragma once #include<vector> class PRO ...

  8. Springboot &amp; Mybatis 构建restful 服务三

    Springboot & Mybatis 构建restful 服务三 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务二 2 restful ...

  9. Gym102082 G-What Goes Up Must Come Down(树状数组)

    Several cards with numbers printed on them are lined up on the table. We’d like to change their orde ...

  10. CentOS命令行性能检测工具

    一.uptime Uptime命令的显示结果包括服务器已经运行了多长时间,有多少登陆用户和对服务器性能的总体评估(load average).load average值分别记录了上个1分钟,5分钟和1 ...