E8

E8

关注
发信
关注(28)粉丝(399)

bootstrap 模态框 video视频测试

链接:https://files.cnblogs.com/files/tele-share/%E8%A7%86%E9%A2%91%E6%B5%8B%E8%AF%95.7z

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <!-- 视口设置,对移动设备的支持 -->

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>模态框视频</title>

 <link rel="stylesheet" href="css/bootstrap.min.css">

 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

 <script type="text/javascript" src="js/bootstrap.min.js"></script>

 <style>

     #myButton {

         position:fixed;

         top:%;

         z-index:;

     }

 </style>

 </head>

 <body>

     <button type="button" class="btn btn-primary" id="myButton" data-toggle="modal" data-target=".bs-example-modal-lg">播放视频</button>

 <div class="modal fade bs-example-modal-lg modal-body" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal"  >

  <div class="modal-dialog modal-lg" role="document">

          <!-- modal header-->

         <div class="modal-header center">

             <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id='close'>

                 <span class="glyphicon glyphicon-remove"></span>

             </button>

             <!-- title -->

              <h4 class="modal-title text-center" id="videoTitle" data-toggle="popover" data-trigger="manual"  data-placement="bottom" data-content="请点击视频进行播放">视频标题</h4>

         </div>

  <div class="modal-content" >

          <div class="modal-body" width="500px" height="500px" style="padding:0">

                  <!--插入视频

                      .chrome下无法实现自动播放,打开chrome://flags/#autoplay-policy,设置为no user gesture is required

                      重启chrome即可

                      .或者添加muted属性,chrome允许静音自动播放

                  -->

          <video controls="controls" autoplay="autoplay"  volume="" id="myVideo"  loop="loop"  width="100%" height="100%"  >

           <source src="a.mp4" type="video/mp4"/>

             Your browser does not support the video tag.

         </video>

          </div>

 <script>

     $(function() {

          var video = document.getElementById("myVideo");

             //激活弹出框

             $('[data-toggle="popover"]').popover();

                  //模拟点击播放视频按钮

             $(document).ready(function() {

                 $("#myButton").click();

             })

                 //模态框

             $("#myModal").modal({

                 show:false,

             //    remote:"demo33_modal.html",//载入某个页面的内容

                 backdrop:"static", //设置static时点击外部区域不会关闭模态框,但"static"提供了与true相同的灰色背景

                 keyboard: true //按下esc时,退出模态框,必须设置tabindex=-1

             })

             //点击关闭按钮时,暂停视频

             $("#close").click(function() {

            //     document.getElementById("myVideo").pause();

                       video.pause();

             });

            setInterval(function() {

                    if(video.paused) {

                        $('[data-toggle="popover"]').popover("show");

                    }else {

                            $('[data-toggle="popover"]').popover("hide");

                    }

                },);

         });

 </script>

  </div>

  </div>

 </div>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

     <p>内容测试内容测试内容测试</p>

 </body>

 </html>

效果

bootstrap 模态框 video视频测试-LMLPHP

05-22 05:12
Powered by LMLPHP ©2024 E8 0.046979