1
我正在处理这个项目，除了三个java脚本按钮之外，我已经完成了一切。 （是的，我必须使用Java脚本）媒体按钮/ Java脚本
按钮出现，但点击它们时，他们什么都不做。我认为事件监听器不适合这些。任何帮助整理出来，将不胜感激。
我已经包括在这里提琴所需的所有代码：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.onload'函数内绑定事件处理函数。您当前的代码尝试从该函数外引用该函数本地的变量，并尝试将处理程序绑定到尚未分析的元素。 （如果您在运行现有代码后检查开发控制台，您应该会看到错误。） – nnnnnn
请原谅我的无知，但我没有提到我是初学者。你能指出或指出我如何正确地做到这一点？ – stangbass08
在第15行有一个关闭'}'，它是'window.onload'函数的结尾。将该'}'移动到脚本的末尾。这会将JS的其余部分放入'window.onload'函数中。 – nnnnnn