javascript - 如何禁用默认视频控件并显示自定义搜索栏

Question

我在这里处理视频，我想使用 jquery 隐藏默认视频控件并显示我的自定义搜索栏。我试图喜欢这个 controls=false 但如果我禁用它，我的自定义栏也会禁用。我想要鞋子定制栏和播放按钮。我不想使用任何插件。 谁能建议我正确的方法吗？

var vid = document.getElementById("video");
vid.ontimeupdate = function(){
  var percentage = ( vid.currentTime / vid.duration ) * 100;
  $("#custom-seekbar span").css("width", percentage+"%");
};

$("#custom-seekbar").on("click", function(e){
    var offset = $(this).offset();
    var left = (e.pageX - offset.left);
    var totalWidth = $("#custom-seekbar").width();
    var percentage = ( left / totalWidth );
    var vidTime = vid.duration * percentage;
    vid.currentTime = vidTime;
});//click()

#custom-seekbar
{  
  cursor: pointer;
  height: 10px;
  margin-bottom: 10px;
  outline: thin solid orange;
  overflow: hidden;
  position: relative;
  width: 400px;
}
#custom-seekbar span
{
  background-color: orange;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0px;
}

/* following rule is for hiding Stack Overflow's console  */
.as-console-wrapper{ display: none !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="custom-seekbar">
  <span></span>
</div>
<video id="video" width="400" controls autoplay>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

Answer 1

出现此错误是因为您没有在常规部分定义percentage 变量。请参阅下面的代码片段:

var percentage = 0;

video.ontimeupdate = function(){
  percentage = ( video.currentTime / video.duration ) * 100;
  $( '#custom-seekbar span' ).css( 'width', percentage + '%' )
}

$( '#custom-seekbar' ).on( 'click', function( e ){
  var offset = $( this ).offset(),
      left = ( e.pageX - offset.left ),
      totalWidth = $( '#custom-seekbar' ).width(),
      percentage = ( left / totalWidth );

  video.currentTime = video.duration * percentage;
})

#custom-seekbar {
  cursor: pointer;
  width: 400px;
  height: 10px;
  margin-bottom: 5px;
  border: thin solid orange;
  overflow: hidden;
  position: relative;
  border-radius: 5px
}
#custom-seekbar span {
  background-color: orange;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0;
  transition-duration: 0.2s
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="custom-seekbar">
    <span></span>
</div>
<video id="video" width="400" autoplay>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

更新:添加播放、暂停和重复按钮。

var percentage = 0;

video.ontimeupdate = function(){
  percentage = ( video.currentTime / video.duration ) * 100;
  $( '#custom-seekbar span' ).css( 'width', percentage + '%' );

  if ( percentage >= 100 ) $( '#play_button' ).html( '⥀' ) /* Repeat */
}

$( '#custom-seekbar' ).on( 'click', function( e ){
  var offset = $( this ).offset(),
      left = ( e.pageX - offset.left ),
      totalWidth = $( this ).width(),
      percentage = ( left / totalWidth );

  video.currentTime = video.duration * percentage;
})

$( '#play_button' ).on( 'click', function() {
  if ( video.paused ) {
    video.play();
    $( this ).html( '❚❚' ) /* Pause */
  } else {
    video.pause();
    $( this ).html( '►' ) /* Play */
  }
} )

.player {
  position: relative;
  width: 400px;
  margin: 0 auto
}
#video {
    width: 100%
}
#custom-seekbar {
  position: absolute;
  top: 0;
  cursor: pointer;
  height: 7px;
  width: 100%;
  background-color: rgba(0, 0, 0, .2);
}
#custom-seekbar span {
  position: absolute;
  top: 0;
  left: 0;
  height: 7px;
  width: 0;
  background-color: rgba(255, 165, 0, .8);
  transition-duration: 0.2s
}
#play_button {
  position: absolute;
  width: 25px;
  height: 25px;
  left: 6px;
  top: 10px;
  text-align: center;
  line-height: 25px;
  background-color: rgba(255, 165, 0, .8);
  border: none;
  color: #555;
  cursor: pointer;
  border-radius: 5px;
  transition-duration: 0.3s
}
#play_button:hover,
#custom-seekbar:hover span {
    background-color: #ff8605
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="player">
  <video id="video">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div id="custom-seekbar">
    <span></span>
  </div>
  <button type="button" id="play_button" title="Play / Pause">&#9658;</button>
</div>