当前位置： 旋风说(旋风PHPer分享网)> 技术文章> 正文
效果图如下：
代码也很简单：
<!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手机网页视频播放器代码</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="bootstrap/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="col-md-12"> <div id="willesPlay"> <div class="playContent"> <video width="100%" height="100%" id="playVideo"> <source src="1.mp4" 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> </body> </html>
代码下载地址：链接: https://pan.baidu.com/s/1s5aXzqIyRa8GAuFtHN2pkw 提取码: xeub
当您发现内容错误或代码bug，以及下载链接无法使用等，请点击屏幕右下角的上报错误来进行提交，我们会尽快修正。
本程序所有源码和工具完全免费，当本网站内容如果侵犯了您的权益，请联系我们，我们会尽快处理，感谢您的合作。
相关文章
评论：
文明上网理性发言，请遵守 新闻评论服务协议
上报错误
