个人中心
gpt4 book ai didi

javascript - 媒体按钮/Javascript

转载 作者：行者123 更新时间：2023-11-30 15:59:40 25 4
gpt4 key购买 nike

我正在从事这个项目，除了三个 Java 脚本按钮之外，我已经完成了所有工作。 (是的，我必须使用 java 脚本)

按钮出现，但点击它们时它们什么也不做。我认为事件监听器不适用于这些。任何解决此问题的帮助将不胜感激。

我已将所有必要的代码包含在此处的 fiddle 中:https://jsfiddle.net/L5r3swbe/ 

window.onload = function() {

  // Video
  var video = document.getElementById("video");

  // Buttons
  var playButton = document.getElementById("playPause");
  var muteButton = document.getElementById("mute");
  var fullScreenButton = document.getElementById("full-screen");

  // Sliders
  var seekBar = document.getElementById("seek-bar");
  var volumeBar = document.getElementById("volume-bar");

}

// Event listener for the play/pause button
//playButton.addEventListener("click", function() {
document.getElementById("playPause").addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();

    // Update the button text to 'Pause'
    playButton.innerHTML = "Pause";
  } else {
    // Pause the video
    video.pause();

    // Update the button text to 'Play'
    playButton.innerHTML = "Play";
  }
});

// Event listener for the mute button
muteButton.addEventListener("click", function() {
  if (video.muted == false) {
    // Mute the video
    video.muted = true;

    // Update the button text
    muteButton.innerHTML = "Unmute";
  } else {
    // Unmute the video
    video.muted = false;

    // Update the button text
    muteButton.innerHTML = "Mute";
  }
});

// Event listener for the seek bar
seekBar.addEventListener("change", function() {
  // Calculate the new time
  var time = video.duration * (seekBar.value / 100);

  // Update the video time
  video.currentTime = time;
});

// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
  // Calculate the slider value
  var value = (100 / video.duration) * video.currentTime;

  // Update the slider value
  seekBar.value = value;
});

// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
  video.pause();
});

// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
  video.play();
});

// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
  // Update the video volume
  video.volume = volumeBar.value;
});
/* body { padding-top: 70px; } */



h1 { font-size: 3em; font-weight: bold; margin-top: 0;}

div#topHeaderRow {


   font-size: 0.9em;
 
   /*
   height: 2em;
   background-color: yellow;  
   line-height: 2em;
*/
}

.price { font-size: 1.4em; color: red; font-weight: bold;}

.similarTitle { font-weight: bold; font-size: 0.9em; }

.cartText { font-size: 0.75em; }

footer {
   margin-top: 1em;
   background-color: #E7E7E7;

}

.tight-form-group { margin-bottom: 5px; }

#copyrightRow { background-color: #3A3A3A; padding: 0.75em 0 0.75em 0; margin-top: 5px;}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter 7</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap-3.0.0/dist/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="Lab6.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="script/Lab6.js"></script>
   
    
  </head>

  <body>

<header>

   <div id="topHeaderRow" >
      <div class="container">
         <nav class="navbar navbar-inverse " role="navigation">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
               </button>
               <p class="navbar-text">Welcome to <strong>Art Store</strong>, <a href="#" class="navbar-link">Login</a> or <a href="#" class="navbar-link">Create new account</a></p>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
               <ul class="nav navbar-nav">
                  <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-gift"></span> Wish List</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-arrow-right"></span> Checkout</a></li>                  
               </ul>
            </div>
         </nav>
      </div>
   </div>   
   
   <div id="logoRow" >
      <div class="container">
         <div class="row">
            <div class="col-md-8">
                <h1>Art Store</h1> 
            </div>
            

            <div class="col-md-4">
               <form class="form-inline" role="search">
               <div class="input-group">
                  <label class="sr-only" for="search">Search</label>
                  <input type="text" class="form-control" placeholder="Search" name="search">
                  <span class="input-group-btn">
                  <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                  </span>
               </div>
               </form> 
            </div>

                        
         </div>
     
      
      </div>
   </div>
   
   <div id="mainNavigationRow" >
      <div class="container">

         <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
               </button>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">
             <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">About Us</a></li>
               <li><a href="#">Art Works</a></li>
               <li><a href="#">Artists</a></li>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Specials <b class="caret"></b></a>
                 <ul class="dropdown-menu">
                   <li><a href="#">Special 1</a></li>
                   <li><a href="#">Special 2</a></li>                   
                 </ul>
               </li>
             </ul>              
            </div>
         </nav>
      </div>  <!-- end container -->
   </div>  <!-- end mainNavigationRow -->
   
</header>

<div class="container">
   <div class="row">

      <div class="col-md-9">
         <h2>Video How Tos</h2>
         <p>Sample video</p>


<div class="jumbotron">
  <div class="container">

<video controls poster="images/art/preview.png" id="video">
  <source src="images/art/sample.mp4" type="video/mp4">
  <source src="images/art/sample.ogv" type="video/ogv">
  <source src="images/art/sample.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<!-- Video Controls -->
  <div id="video-controls">
    <button type="button" id="playPause">Play</button>
   <!-- <input type="range" id="seek-bar" value="0"> -->
    <button type="button" id="mute">Mute</button>
    <!--<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1"> -->
    <button type="button" id="full-screen">Full-Screen</button>
  </div>
</div>
</div>

  </div>
</div>         
         
         

      </div>  <!-- end col-md-10 (main content) -->
      
      <div class="col-md-3">
    
      
         <div class="panel panel-info">
            <div class="panel-heading">
               <h3 class="panel-title">Other Videos</h3>
            </div>
            <div class="panel-body">
               <ul class="nav nav-pills nav-stacked">
                  <li><a href="#">Working with the cart</a></li>
                  <li><a href="#">Registering an account</a></li>
                  <li><a href="#">Checking out</a></li>
                  <li><a href="#">Using the search</a></li>
                  <li><a href="#">Checking your order</a></li>
                  <li><a href="#">Returning your order</a></li>
               </ul>
            </div>
         </div>  

         <div class="panel panel-danger">
            <div class="panel-heading">
               <h3 class="panel-title">Problems Playing Videos?</h3>
            </div>
            <div class="panel-body">
               <ul class="nav nav-pills nav-stacked">
                  <li><a href="#">Download more recent browser</a></li>
                  <li><a href="#">Install Flash</a></li>
               </ul>
            </div>
         </div> 
      
      </div> <!-- end col-md-2 (right navigation) -->           
   </div>  <!-- end main row --> 
</div>  <!-- end container -->




    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="bootstrap-3.0.0/assets/js/jquery.js"></script>
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>    
  </body>
</html>

最佳答案

您在 window.load 处理程序中声明的变量在该函数之外不可访问。
最简单的解决方案是将所有其余代码放在 window.load 处理程序中。

关于javascript - 媒体按钮/Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37956856/

25 4 0
文章推荐： calloc、malloc 和动态结构分配
文章推荐： c - Deepcheck 错误 - 未初始化数据 'db'
文章推荐： c - makefile 包含其他目录中的 *.h 文件
文章推荐： SFMT 与 Mersenne Twister 和 Ran2 的比较
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com