如何更新我的模板，以便進度條顯示視頻在播放過程中的位置？

Question

雙子座Plasma.js

var Transform = famous.core.Transform; 

    Template.geminiPlasma.rendered = function() { 
     var plasmaFView = FView.byId('gemini-plasma'); 
     var steelFabVideoControlsSurface = FView.byId('steel-fab-video-controls-surface'); 
     console.log("plasmaFView: ", plasmaFView); 
     console.log("steelFabVideoControlsSurface: ", steelFabVideoControlsSurface); 


     plasmaFView.modifier.setSize([undefined, undefined]); 
     plasmaFView.modifier.setTransform(Transform.translate(0, -60), {duration: 1000}); 

     steelFabVideoControlsSurface.modifier.setSize([undefined,100]); 
     steelFabVideoControlsSurface.modifier.setTransform(Transform.translate(window.innerWidth - 300, window.innerHeight - 170, 999)); 

GeminiPlasma模板：

<template name="geminiPlasma"> 
    {{#View modifier="StateModifier"}} 
     {{#Surface id="gemini-plasma" modifier="StateModifier"}} 
      <article class="above-fold steel-fab"> 
       <div class="bg-fade"></div> 
       <video id="video" class="bgvid"> 
        <source src="/videos/gemini-plasma.mp4" type="video/mp4"> 
       </video> 
       <h1>FICEP- Gemini HP 25-CNC Thermal Cutting</h1> 
       <p>Fast, accurate cuts</p> 
      </article> 
     {{/Surface}} 
     {{>Surface template="videoControls" id="steel-fab-video-controls-surface" modifier="StateModifier"}} 
{{/View}} 
</template> 

視頻控件模板

<template name="videoControls"> 
    <div id="video-controls"> 
     <button type="button" id="play-pause">Play</button> 
     <input type="range" name="seek-bar" id="seek-bar" value="0"> 
     <button type="button" id="mute">Mute</button> 
    </div> 
</template> 

VideoControls.js：

var Transform = famous.core.Transform; 

Template.videoControls.rendered = function() { 
    var videoControlsFView = FView.from(this); 
    videoControlsFView.modifier.setTransform(Transform.translate(30, window.innerHeight - 320, 9999)); 
}; 

Template.videoControls.events({ 
    'click button#play-pause': function(event) { 
     var video = document.getElementById("video"); 
     var playButton = document.getElementById("play-pause"); 

     if (video.paused == true) { 
        video.play(); 
        playButton.innerHTML = "Pause"; 
       } else { 
        video.pause(); 
        playButton.innerHTML = "Play"; 
       } 
    }, 
    'click button#mute': function(event) { 
     var video = document.getElementById("video"); 
     var muteButton = document.getElementById("mute"); 
     if (video.muted == false) { 
      video.muted = true; 
      muteButton.innerHTML = "Unmute"; 
     } else { 
      video.muted = false; 
      muteButton.innerHTML = "Mute"; 
     } 
    }, 
    'click #seek-bar': function() { 
     var video = document.getElementById("video"); 
     var seekBar = document.getElementById("seek-bar"); 

     var time = video.duration * (seekBar.value/100); 
     video.currentTime = time; 

     console.log("video.duration: ", video.duration); 
     console.log("video.currentTime: ", video.currentTime); 

     var value = (100/video.duration) * video.currentTime; 
     seekBar.value = value; 
    } 
}); 

我使用流星，以及著名（知名視角）。如何更新seekBar（製作反應）以顯示播放期間視頻的位置？ <input type="range" name="seek-bar" id="seek-bar" value="{{getValue}}">然後在模板的助手中創建一個getValue方法？如果我這樣做，那麼我如何從視頻中獲取更新的值？

Answer 1

Template.videoControls.events({ 
    'click button#play-pause': function(event) { 
     var video = document.getElementById("video"); 
     var playButton = document.getElementById("play-pause"); 
     var seekBar = document.getElementById("seek-bar"); 

     // 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; 
     }); 


     if (video.paused == true) { 
        video.play(); 
        playButton.innerHTML = "Pause"; 

       } else { 
        video.pause(); 
        playButton.innerHTML = "Play"; 
       } 
    },