带来一篇HTML5和css3实例:制造HTML5网页视频播放器

只看该作者 · 发表于 2015-1-15 22:57:56

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
破洛洛文章简介：HTML5+CSS3+jQuery制造视频播放器完整指南.

播放器最后的效果预览图

导读：毫无疑问HTML5已是局势所趋，出名视频网站YouTube在两年前就入手下手推行HTML5播放器来取代Flash。固然国际还没有完整提高HTML5扫瞄器，但在各年夜外乡扫瞄器厂商的勉力下，撑持HTML5的扫瞄器在中国扫瞄器市场的占据率也在不休增加中。本教程将会手把手地教你制造一个基于HTML5&CSS3&JavaScript手艺的视频播放器。
1.下载MediaElement.js
起首下载MediaElement.js剧本文件，这是一个开源的HTML5音、视频插件，解压后你会失掉3个文件——"flashmediaelement.swf"、"mediaelement-and-player.min.js"和"silverlightmediaelement.xap"，分离是利用Flash、JavaScript和SilverLight完成视频播放，而且新建一个"js"文件夹并把它们放出来（固然本例中其实不必要"flashmediaelement.swf"和"silverlightmediaelement.xap"两个文件，能够删往。）。
2.HTML标志
起首必要链接(link)一个jQuery库，这里利用的是Google托管的jQuery库。然后我们在链接"mediaelement-and-player.min.js"文件和CSS文件。

<head><title>VideoPlayer</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scriptsrc="js/mediaelement-and-player.min.js"></script><linkrel="stylesheet"href="css/style.css"media="screen"></head>

复制代码

固然我们还必要增加一个HTML5video标志来创立一个视频播放器，再增加一些属性将它初始化。（注：poster是指视频的预览图）

<videowidth="640"height="267"poster="media/cars.png"><sourcesrc="media/cars.mp4"type="video/mp4"></video>

复制代码

接上去我们再到场上面的代码来创立把持面板，必要增加的把持器或功效有：

alwaysShowControls–"true"则设置video把持面板永久显现，"false"则在鼠标移走后埋没。
videoVolume–"horizontal"设置音量滑动把持器为程度
别的功效：停息播放、行进播放、声响和全屏
1. <scripttype="text/javascript">//<![CDATA[$(document).ready(function(){$(video).mediaelementplayer({alwaysShowControls:true,videoVolume:horizontal,features:[playpause,progress,volume,fullscreen]});});//]]></script>
复制代码

更多设置请查阅MediaElement.js的设置文档。
3.播放器基础款式计划
先修正一下款式设置：

.mejs-inner,.mejs-innerdiv,.mejs-innera,.mejs-innerspan,.mejs-innerbutton,.mejs-innerimg{margin:0;padding:0;border:none;outline:none;}

复制代码

再给videocontainer增加款式，上面的代码全体都是用来把持结构的，没有对播放器款式做任何修正。

.mejs-container{position:relative;background:#000000;}.mejs-inner{position:relative;width:inherit;height:inherit;}.me-plugin{position:absolute;}.mejs-container-fullscreen.mejs-mediaelement,.mejs-container-fullscreenvideo,.mejs-embed,.mejs-embedbody,.mejs-mediaelement{width:100%;height:100%;}.mejs-embed,.mejs-embedbody{margin:0;padding:0;overflow:hidden;}.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000;}.mejs-background,.mejs-mediaelement,.mejs-poster,.mejs-overlay{position:absolute;top:0;left:0;}.mejs-posterimg{display:block;}

复制代码

登录/注册后可看大图

4.把持面板款式设置
让我们先从增加“播放按钮”入手下手：

.mejs-overlay-play{cursor:pointer;}.mejs-inner.mejs-overlay-button{position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px00-25px;background:url(../img/play.png)no-repeat;}

复制代码

接上去再增加视频把持器结构：将它放在视频底部，高度为34px，再增加一个背景色彩，共同RGBA来设置通明度。最初给按钮增加基础款式和图元。

.mejs-container.mejs-controls{position:absolute;width:100%;height:34px;left:0;bottom:0;background:rgb(0,0,0);background:rgba(0,0,0,.7);}.mejs-controls.mejs-buttonbutton{display:block;cursor:pointer;width:16px;height:16px;background:transparenturl(../img/controls.png);}

复制代码

登录/注册后可看大图

破洛洛文章简介：HTML5+CSS3+jQuery制造视频播放器完整指南.

5.视频把持器
这一步我们要做的只是将把持器居右安排。以是起首我们将一切的按钮放到把持面板上，以后再对它们的宽度、地位和背景图片做具体的调剂。

.mejs-controlsdiv.mejs-playpause-button{position:absolute;top:12px;left:15px;}.mejs-controls.mejs-playbutton,.mejs-controls.mejs-pausebutton{width:12px;height:12px;background-position:00;}.mejs-controls.mejs-pausebutton{background-position:0-12px;}.mejs-controlsdiv.mejs-volume-button{position:absolute;top:12px;left:45px;}.mejs-controls.mejs-mutebutton,.mejs-controls.mejs-unmutebutton{width:14px;height:12px;background-position:-12px0;}.mejs-controls.mejs-unmutebutton{background-position:-12px-12px;}.mejs-controlsdiv.mejs-fullscreen-button{position:absolute;top:7px;right:7px;}.mejs-controls.mejs-fullscreen-buttonbutton,.mejs-controls.mejs-unfullscreenbutton{width:27px;height:22px;background-position:-26px0;}.mejs-controls.mejs-unfullscreenbutton{background-position:-26px-22px;}

复制代码

登录/注册后可看大图

6.音量滑动把持器
音量滑动把持器的设置也一样，设置好地位和巨细，再增加一个圆角效果就能够了。

.mejs-controlsdiv.mejs-horizontal-volume-slider{position:absolute;cursor:pointer;top:15px;left:65px;}.mejs-controls.mejs-horizontal-volume-slider.mejs-horizontal-volume-total{width:60px;background:#d6d6d6;}.mejs-controls.mejs-horizontal-volume-slider.mejs-horizontal-volume-current{position:absolute;width:0;top:0;left:0;}.mejs-controls.mejs-horizontal-volume-slider.mejs-horizontal-volume-total,.mejs-controls.mejs-horizontal-volume-slider.mejs-horizontal-volume-current{height:4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}

复制代码

登录/注册后可看大图

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

只看该作者 · 发表于 2015-1-17 19:55:53

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

仓酷云 · 发表于 2015-1-26 22:12:11

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-2-5 04:34:06

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-2-11 05:47:23

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-1 23:36:48

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-3-11 03:11:41

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-3-17 21:10:33

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-25 06:11:12

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 带来一篇HTML5和css3实例:制造HTML5网页视频播放器

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子