html5播放MP4代码、支持手机

2016-09-20 18:21:43

<meta charset="utf-8" />
<link href="http://www.ruikang.net/html5/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="http://www.ruikang.net/html5/css/willesPlay.css" rel="stylesheet" type="text/css" />
<script src="http://www.ruikang.net/html5/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script><script src="http://www.ruikang.net/html5/js/willesPlay.js" type="text/javascript" charset="utf-8"></script>
<div class="row">
         <div class="col-md-12">
                   <div id="willesPlay">
                            <div class="playHeader">
                                     <div class="videoName">
/*这个名字可以改动*/
                                               瑞康播放器</div>
                            </div>
                            <div class="playContent">
                                     <div class="turnoff">
                                               <ul>
                                                        <li>
                                                                  </li>
                                                        <li>
                                                                  </li>
                                                        <li>
                                                                  </li>
                                               </ul>
                                     </div>
                                     <video height="100%" id="playVideo" width="100%">
/*video/mp4就是源文件名*/
                                               <source src="http://www.ruikang.net/upload/move/family.mp4" type="video/mp4"> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="/">下载视频</a> </source></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 aria-valuemax="100" aria-valuemin="0" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" style="width: 0%">
                                                                  </div>
                                               </div>
                                               <span class="duration">0:00:00</span></div>
                                     <div class="otherControl">
                                               <div class="volumeBar">
                                                        <div class="volumewrap">
                                                                 <div class="progress">
                                                                           <div aria-valuemax="100" aria-valuemin="0" class="progress-bar progress-bar-danger" role="progressbar" style="width: 8px;height: 40%;">
                                                                                     </div>
                                                                 </div>
                                                        </div>
                                               </div>
                                     </div>
                            </div>
                   </div>
         </div>
</div>

html5播放MP4代码、支持手机

评论列表

我要评论

评论内容*
姓名
验证码*