我正在关注HTML5视频播放器教程的YouTube教程。单击进度条并从您单击的位置播放的功能似乎不起作用。
我有一个错误“TypeError:e未定义”。我不是百分之百确定为什么会这样,我想不出一个解决方法。
的index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8"/>
<title></title>
<!-- ANGULAR IMPORTS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ui-router-master/release/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js"></script>
<script src="flowplayer/flowplayer-3.2.12.min.js"></script>
<!-- JS FILES -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="js/directives.js"></script>
<link href='css/app.css' rel='stylesheet'>
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="/#"></a></h1>
</div>
<div class="nav">
<ul>
<li><a ui-sref="state1">State 1</a></li>
<li><a ui-sref="gallery">Gallery</a></li>
<li><a ui-sref="videos">Videos</a></li>
</ul>
</div>
</div>
</div>
<div class="dynamiccontent">
<div ui-view></div>
</div>
</body>
</html>
app.js
/******** MAIN ANGULAR VAR *******/
var myapp = angular.module('myapp', [
'ui.router',
'ngAnimate',
'appController',
'slider.directive'
]);
/******* UI-ROUTING *******/
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /state1
$urlRouterProvider.otherwise("/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: 'state1controller'
})
.state('videos', {
url: "/videos",
templateUrl: "partials/video.html",
//controller: ''
})
.state('gallery', {
url: "/gallery",
templateUrl: "partials/gallery.html",
controller: 'slidercontroller'
});
});
/******* VIDEO *******/
function doFirst(){
myMovie = document.getElementById('myMovie');
playButton = document.getElementById('playButton');
defaultBar = document.getElementById('defaultBar');
progressBar = document.getElementById('progressBar');
}
function playOrPause(){
if(!myMovie.paused && !myMovie.ended){
myMovie.pause();
playButton.innerHTML = 'Play';
window.clearInterval(updateBar);
} else {
myMovie.play();
playButton.innerHTML = 'Pause';
updateBar = setInterval(update, 500);
}
}
function update(){
var barSize = 600;
if(!myMovie.ended){
size = parseInt((myMovie.currentTime * barSize) / myMovie.duration);
progressBar.style.width = size + "px";
} else {
progressBar.style.width = "0px";
playButton.innerHTML = "Play";
window.clearInterval(updateBar);
}
}
function clickedBar(e){
var barSize = 600;
if(!myMovie.paused && !myMovie.ended){
var mouseX = e.pageX-bar.offsetLeft; //offset left is how far left relative to that element. Essentially calculates x position of the mouse.
var newTime = (mouseX * myMovie.duration) / barSize;
myMovie.currentTime = newTime;
progressBar.style.width = mouseX + "px";
}
}
video.html
<div id="big_wrapper">
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="videos/testVideo.mp4"/>
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton" onclick="playOrPause()">Play</button>
</div>
<div id="defaultBar" onclick="clickedBar()">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</div>
app.css
#big_wrapper {
text-align:center;
}
#skin {
width: 700px;
margin: 100px auto;
padding: 5px;
background: red; /*change eventually*/
border: 4px solid black; /*change eventually*/
border-radius: 10px;
}
nav {
margin: 5px 0px;
}
#buttons {
float:left;
width: 70px;
height: 22px;
}
#defaultBar {
position:relative;
float:left;
width:600px;
height: 16px;
padding: 4px;
border:2px solid black;
background: yellow;
}
#progressBar {
position:absolute;
width: 0px;
height: 16px;
background: blue;
}
感谢任何帮助。提前谢谢!