首先说这是一个神奇的播放器,为什么神奇呢,先直接看最终成果:



点击我查看demo


不用object或者embed标签插入就能完成video的播放,那要感谢html5和css3的强大功能了,详细了解:

http://webdesign.tutsplus.com/tutorials/site-elements/skin-orman-clarks-video-interface-using-jplayer-and-css

现在我们就step by step的详细指导吧,大家千万不要嫌长哦,不敢兴趣的地方可以直接略过,主要是为了保持文章的完整性O(∩_∩)O:

step1:HTML5 标记

Step 2: 下载 jPlayer插件

插件地址: jplayer.org
然后在head里面引用,当然是基于Jquery的插件

Step 3: Player 标记

html如下:

Step 4: Controls 标记

html如下:

主要包含:
播放,停止按钮
进度条
时间提醒
静音切换
卷栏
全屏切换

Step 5: 添加视频

jPlayer插件目前支持以下视频格式:
mp3
mp4 (AAC/H.264)
ogg (Vorbis/Theora)
webm (Vorbis/VP8)
wav
使用代码如下:

更多使用方法见:jplayer.org

Step 6: Video 基本样式

css代码如下:

Step 7:基本控制样式

css样式如下:

Step 8: 停止播放按钮

css样式如下:

Step 9: 进度条样式

css样式如下:

Step 10:当前时间 / 持续时间的css样式

css样式如下:

第 11 步: 卷按钮和栏

css样式如下:

第 12 步: 全屏按钮

CSS样式如下:

哈哈,到这里我们的 video player就完成了,是不是代码很多,看得头大,其实不用那么紧张,我们只需要看关键地方就行了,比如说,了解那个player是如何使用的,还有具体的界面也有对应的CSS注释,关键是这些代码可以单独提取出来复用,仅供给大家自制播放器的时候提供一个参考,感谢伟大的coder的默默无闻奉献,上帝会一直眷顾你们的,阿门~~~

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/03/videoply/

  1. 董滔 2016 年 10 月 20 日

    请问一个移动端video标签,怎么样实现网页中播放,而不使用浏览器的播放器或系统自带的播放器进行播放?

  2. FFXIV Gil Cactuar 2013 年 9 月 2 日

    Wow that was odd. I just wrote an really long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say wonderful blog!

  3. 稀饭秀 2012 年 5 月 7 日

    牛啊,不解释,菜鸟努力学习中

发表评论