HTML5视频更新栏 - 单击栏不起作用

时间:2016-01-14 11:01:27

标签: javascript html html5 progress-bar html5-video

我正在关注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;
}

感谢任何帮助。提前谢谢!

0 个答案:

没有答案