为什么我点击再看一次的时候无法自动播放呢？？？
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 */ }
