首页 新闻 赞助 找找看

为什么我点击再看一次的时候无法自动播放呢???

0
悬赏园豆:5 [已关闭问题] 关闭于 2016-05-24 14:53
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  <link rel="stylesheet" href="css/index.css">
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script>
    function playlist(a){
    var MV=document.getElementById("second");
    MV.src=a.id+'.mp4';
    MV.play();
    }
  </script>
</head>
<body onLoad="loadPage();doContinue('completed');" >
      <!-- 视频 -->
    <video  controls="controls" controls poster="images/1.jpg" id="video" autoplay> 
      <source src="video/1.mp4" type="video/mp4"></source> 
    </video> 
    <!-- 弹窗 -->
    <div class="ngdialog-overlay" style="display: none;"></div>
    <div class="result" style="display: none;">
    <p class="words">刚刚播放的视频中有9个错误,你都发现了吗?</p>
    <!-- 按钮 -->
    <div class="an">
      <a href="#" class="btns" id="reset">再看一次</a>
      <a href="video/2.mp4" onClick="playlist(this)"  class="btns" id="second">查看答案</a>
    </div>
      
    </div>
 
 
     <script type="text/javascript">
     var video = document.getElementById("video"); 
     video.loop = false;
     video.addEventListener('ended', function () {
          $(".result").show();//弹窗  
          $(".ngdialog-overlay").show();
             }, false);
    
          $("#reset").click(function() {
             $(".result").hide();//弹窗  
             $(".ngdialog-overlay").hide();

          })
           
</script>
<script type="text/javascript">
           /*  $(document).ready(function(){
               alert($(window).height()); //浏览器当前窗口可视区域高度
              })*/
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            var height=window.screen.Height;
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                //alert("phone");
            } else if ($(window).height()==590) {
                $('.translate-back ').css("width","355px").css("margin","0 auto");
                $('.p-ct').css("margin","0 auto");
            }else{
                //alert("pc");
                $('.btns').css("margin","79px 8px");
                $('.result').css("left","35%");
            }
        }

        browserRedirect();
     
    </script>
</body>
</html>
    #video,.btns {
    margin: 0 auto;
    display: block;
    max-width:90%;
          }
 .result {
    position: fixed;
    z-index: 99;
    border-radius: 15px;
    display: none;  
    top: 20%; 
}
.an {
    margin-top: 15%;
}
.ngdialog-overlay {
    position: fixed;
    background:#606060;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: ngdialog-fadein .5s;
    animation: ngdialog-fadein .5s;
    display: none;
}
.btns {
    color: #fff;
    background: green;
    border-radius: 6px;
    padding: 10px;
    width: 38%;
    margin: 8px;
    text-align: center;
    font-weight: 800;
    float: left;
    text-decoration: none;
}
 .progress{width: 100%; height: 16px; background-color: #CCC; position: relative;}
.progress .ibar {width: 0px; height: 16px; background-color: #9370DB; position: absolute;}
.progress .num{position: absolute;}
a, button, input {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.words {
    color: #dadada;
    font-size: 20px;
    font-family: 微软雅黑;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}
/* 竖屏 */
@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* 横屏 */
@media screen and (orientation:landscape) {

/* landscape-specific styles */

}
像风一样自由~~~的主页 像风一样自由~~~ | 初学一级 | 园豆:48
提问于:2016-05-23 18:26
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册