炫酷的html5视频播放器_html5视频播放器脚本资源-CSDN文库

共13个文件

css：3个

js：2个

html：1个

html5

视频播放器

mobile

bootstrap

3星 · 超过75%的资源需积分: 2 188 浏览量 2017-01-03 15:26:29 上传评论收藏 172KB RAR 举报

HTML5视频播放器是现代网页开发中的重要组成部分，它允许开发者在不依赖Flash等外部插件的情况下嵌入视频内容。本项目名为“炫酷的html5视频播放器”，旨在提供一个全栈基于HTML5、CSS3和JavaScript的解决方案，特别强调了对移动设备的兼容性和与Bootstrap框架的集成。我们来深入了解HTML5的视频元素。HTML5 `<video>` 元素是内建支持视频播放的核心组件，它可以内联在网页中显示视频内容。通过`<video>`标签，我们可以设置视频源（`src`属性），控制视频的宽高（`width`和`height`属性），以及指定预加载策略（`preload`属性）和是否自动播放（`autoplay`属性）。同时，HTML5还提供了`controls`属性，用于添加默认的播放、暂停、音量控制等用户界面。接下来，我们关注CSS3在这个项目中的应用。CSS3允许开发者创建更丰富、更动态的视觉效果，例如动画、过渡和渐变。在这个播放器中，可能使用了CSS3来定制播放器的外观，如按钮样式、进度条设计以及响应式布局，确保在不同设备上都能保持一致的用户体验。CSS3媒体查询（`@media`规则）可以检测设备特性，如屏幕尺寸，从而实现自适应布局，使得播放器在电脑和手机上都能完美呈现。 JavaScript则是实现播放器交互功能的关键。通过监听事件（如点击、触摸等），JavaScript可以控制视频的播放、暂停、音量调整、快进/后退等功能。此外，还可以实现更高级的特性，比如视频的分段加载、播放进度指示、全屏切换等。在本项目中，JavaScript可能已经封装成了一个独立的库或模块，方便开发者集成和自定义。 Bootstrap是流行的前端开发框架，它提供了大量的预设样式和组件，大大简化了响应式网站的开发。在这个HTML5视频播放器中，Bootstrap的使用确保了播放器在各种屏幕尺寸下都能良好显示，其网格系统和预定义的按钮样式可能被用来优化布局和交互。Bootstrap还提供了JavaScript插件，例如模态框，可能会被用作视频全屏模式的实现。至于压缩包内的"html5-video-player-mobile"文件，这可能是项目的源代码目录，包含了HTML文件、CSS文件和JavaScript文件。在这些文件中，你可以找到具体的实现细节，例如视频播放器的结构定义、样式定义和脚本逻辑。通过查看和学习这些源代码，开发者能够深入理解如何构建一个跨平台、响应式的HTML5视频播放器，并且能够根据自己的需求进行定制和扩展。总结起来，这个“炫酷的html5视频播放器”项目展示了HTML5、CSS3和JavaScript在现代网页开发中的强大功能，尤其是对于移动设备的支持。通过Bootstrap的集成，开发者可以快速创建一个美观且功能丰富的视频播放器，无论是在桌面还是移动设备上，都能为用户提供出色的观看体验。对于想要提升前端技能或者涉足视频播放器开发的人来说，这是一个极好的学习资源。

资源推荐

资源详情

资源评论

收起资源包目录

html5-video-player-mobile.rar （13个子文件）

html5-video-player-mobile

css

reset.css 3KB

willesPlay.css 4KB

bootstrap

css

bootstrap.css 144KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.eot 20KB

images

playheader.jpg 346B

control_01.png 7KB

jquery-1.11.3.min.js 94KB

willesPlay.js 6KB

index.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <title>超炫酷的HTML5视频播放器DEMO演示</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/willesPlay.css"/> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/willesPlay.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="willesPlay"> <div class="playHeader"> <div class="videoName">Tara - 懂的那份感觉</div> </div> <div class="playContent"> <div class="turnoff"> <ul> <li><a href="javascript:;" title="喜欢" class="glyphicon glyphicon-heart-empty"></a></li> <li><a href="javascript:;" title="关灯" class="btnLight on glyphicon glyphicon-sunglasses"></a></li> <li><a href="javascript:;" title="分享" class="glyphicon glyphicon-share"></a></li> </ul> </div> <video width="100%" height="100%" id="playVideo"> <source src="http://220.167.105.121/170/2/11/acloud/151672/letv.v.yinyuetai.com/he.yinyuetai.com/uploads/videos/common/6609014F06AE1C8E99DE142502A2B157.flv?crypt=95aa7f2e98550&b=1314&nlh=3072&nlt=45&bf=6000&p2p=1&video_type=flv&termid=0&tss=no&geo=CN-23-323-1&platid=0&splatid=0&its=0&qos=5&fcheck=0&proxy=3062324601,2101603530,3683272595&uid=3063271287.rp&keyitem=GOw_33YJAAbXYE-cnQwpfLlv_b2zAkYctFVqe5bsXQpaGNn3T1-vhw..&ntm=1447949400&nkey=55c24f4c47dd315085c383e07750f67e&nkey2=3344c026a5c147651522c75bc51fb700&sc=0e90a16b75f7bc55&br=3136&vid=782863&aid=1559&area=KR&vst=0&ptp=mv&rd=yinyuetai.com?sc=0e90a16b75f7bc55&errc=0&gn=1065&buss=106551&cips=182.149.207.119&lersrc=MTI1Ljg5Ljc0LjE3MQ==&tag=yinyuetai&cuhost=letv.v.yinyuetai.com&cuid=151672&flw3x=0&sign=coopdown&fext=.flv&br=3136&ptp=mv&rd=yinyuetai.com" type="video/mp4"></source> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="/">下载视频</a> </video> <div class="playTip glyphicon glyphicon-play"></div> </div> <div class="playControll"> <div class="playPause playIcon"></div> <div class="timebar"> <span class="currentTime">0:00:00</span> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div> </div> <span class="duration">0:00:00</span> </div> <div class="otherControl"> <span class="volume glyphicon glyphicon-volume-down"></span> <span class="fullScreen glyphicon glyphicon-fullscreen"></span> <div class="volumeBar"> <div class="volumewrap"> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px;height: 40%;"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> </body> </html>

评论收藏

内容反馈