您当前的位置： 首页 > 模板分享 > 作品展示 > 企业 网站首页企业
html5高仿web优酷播放器
发布时间：2015-06-01 22:24:45编辑：雪饮阅读（）
在学校学习html5仅仅只是学习了皮毛,上班后无意间发现兄弟连也有html5方面的视频教程，看着还挺不错。公司也有相关需求，于是决定重修html5.
学习到html5的video标签后发现这个标签挺好玩，让我联想到了优酷web播放器如果可以用html5实现还是挺不错的。
于是开始了html5高仿优酷web播放器的探索。
仿这个播放器有以下问题：
1‘、video的controls属性所拥有的播放器控件是根据浏览器的不同而拥有不同的主题样式，我们如何来更改？
2、对于播放器中的缩略图轮播如何处理，难道每个缩略图还要手动获得？
3、对于视频总长度的获取？
首先对于问题一：
我们可以不给controls属性，我们完全来自定义该控件，自定义控件很简单，只有一个可以拉动的进度条比较麻烦。
这个拉动的进度条是因浏览器不同而不同，我们可以用如下方法去除其默认样式并更改为我们所需要的样式：
#volume{
-webkit-appearance:none;
display:block;
/*
-webkit-appearance的CSS属性用于webkit浏览器来显示一个元素使用平台的本地样式基于操作系统的主题。我们需要把这个属性去掉。其他浏览器都有对应的属性。
*/
background:rgba(0,0,0,0); filter:alpha(opacity=40);
height:10px;
width:672px;
line-height:10px;
outline-style:none;/*去除默认的外边框样式*/
}
.volumeshow::-webkit-slider-thumb{
-webkit-appearance:none;/*去除默认的滑块*/
width:20px;
height:20px;
margin-bottom:1px;
border:3px solid red;
border-radius:10px;
background:#e9d4c1;
}
上面两个代码块分别处理拉动的进度条的焦点和进度条本身的样式。
对于上面的问题二：
我们可以通过php进行linux发送给ffmpeg来进行获取视频的缩略图，但是新的问题又来了。一个视频的缩略图会按帧来取，而php取缩略图的速度在windows中是非常的缓慢的，这样对于用户的体验是比较差的，遂仔细观察优酷web播放器的缩略图细节，发现并非每一帧都获取，于是我按照我所想的思路（每5秒获取一次当前时间的第一帧做为缩略图），但即使是这样仍然很费时间，即便是linux也不知道能够有多么快的速度。所以我们必须使用ajax这样可以很友好的给用户以比较好的体验。
对于问题三：
若要刚开始就要获取视频时间肯定不会准确，谁知道视频是否完全加载ok？所以我们要对视频的加载状态进行判断之后才能够获取视频的总时长：
function chushihua(){
var privatevideo=document.getElementById("video1");
var a = setInterval(function() {
if(privatevideo.readyState > 0) {
//document.getElementById("init").innerHTML="初始化成功：可以获取视频总时长";
document.getElementById("video1").poster="cover.jpg";
clearInterval(a);
}
}, 1000);
/*if(document.getElementById("init").innerHTML=="初始化成功：可以获取视频总时长"){
var b=setInterval(function(){
var ycz=document.getElementById("By_using").value;
if(ycz=="play"){
alert(privatevideo.volume);
}
},1000);
}*/
}
</script>
将该方法在网页加载完毕onload时执行即可。
播放器的大致思路就是这样了，下面看看制作好之后的播放器效果如下：
下面是项目的整个源码压缩包，有兴趣的朋友可以进行更深入的研究，争取能够做成用参数来控制的源码，可以通过外部引用传参。
需要注意的是ffmpeg在对php的环境要求比较高，如果你的环境比较低请先看看雪饮个人博客中的升级php环境一帖：php5.12升级到php5.3.28
关键字词：html5,优酷,个人博客