如何獲得視頻上的精確時間更新以返回2個十進制數（毫秒）？

Question

我有一個視頻元素，我想將它的當前時間與最多2個十進制值進行比較。

$(video1).on('timeupdate', function(){ 
    var currentTime = Math.round(this.currentTime); 
    var durationNum = Math.round(this.duration); 
    var formattedCurrentTime = secondsToHms(currentTime); 
    var formattedDurationTime = secondsToHms(durationNum) 
    onTrackedVideoFram(formattedCurrentTime, formattedDurationTime) 

    if(currentTime >10){ $(".box1, .box2").hide(); } 

    if(currentTime == choiceHeart){ 
     console.log("HERE"); 
     video1[0].pause(); 

    } 

這是來自一個教程文件，所以唯一的辦法，我知道如何讓timeupdate返回的值是通過返回圓整數math.round功能。

但是，我想觸發一個事件，像暫停在，比方說，2.5分鐘視頻（或2分鐘15幀 - 通過後的效果每秒30倍的標準）****

的這樣我可以做的就是這樣的文檔中早期創建變量：

var triggerEvent = 2.5; 

所以，我怎麼去理解，2.5手段以2分半鐘返回此值，它應暫停在2視頻&半分鐘？

PS：

爲了暫停視頻我打算使用，如果循環：

if(currentTime == triggerEvent){ 
    video1[0].pause(); 
} 

這裏VIDEO1被引用到指向其保持視頻股利的變量。

Answer 1

您可以使用Media Fragments URI準確地播放您請求

正常播放時間可以被指定爲秒的時間片，帶有可選 小數部分表示毫秒，或冒號分隔小時， 分鐘和秒（再次使用可選分數）。

例如，下面的代碼將在pause事件在HTMLMediaElement

video.src = "/path/to/media#t=0,10" 

參見

• HTML5 audio streaming: precisely measure latency?

• 出動之前播放的媒體十秒How to make range request for any portion of a media fragment?

---

可以使用級聯到"src"屬性值媒體片段標識符#t=00:00,02:30，以便爲媒體資源的指定時間維度範圍請求。

當媒體片段標識符被設定爲在HTMLMediaElement和.play()的"src"屬性或.src財產被調用時，正好2分30秒的媒體將發揮02:30，在調度.pause()事件之前到達時02:30，或150秒

<label></label><br> 
 
<video 
 
    width="300" 
 
    height="200" 
 
    controls></video> 
 
<script> 
 
const video = document.querySelector("video"); 
 
const label = document.querySelector("label"); 
 
const src = "http://mirrors.creativecommons.org/movingimages/webm/ASharedCulture_480p.webm"; 
 
const timeSlice = "#t=00:00,02:30"; 
 
let raf; 
 
video.src = src + timeSlice; 
 
video.oncanplay = video.play; 
 
video.onpause = function(event) { 
 
    video.onmouseenter = video.onmouseleave = raf = null; 
 
    // do stuff 
 
    if (Math.floor(video.currentTime) === 60*2.5) { 
 
    console.log(video.currentTime, video.currentTime/60); 
 
    } 
 
} 
 
function update(t) { 
 
    let curr = Math.floor(video.currentTime); 
 
    let message = `${curr} seconds played, ${(60*2.5)-curr} to play before pause event`; 
 
    label.innerHTML = message; 
 
    raf = window.requestAnimationFrame(update); 
 
} 
 

 
video.onmouseenter = function() { 
 
    raf = requestAnimationFrame(update); 
 
} 
 
video.onmouseleave = function() { 
 
    label.innerHTML = ""; 
 
    window.cancelAnimationFrame(raf); 
 
} 
 
</script>

Answer 2

你四捨五入變量在比較中...
四捨五入得到接近整數：

0.4給出了0
0.6給出了1

爲了得到一個浮點數有兩位小數，你可以這樣做：

var currentTime = parseFloat(this.currentTime); 
currentTime = parseFloat(currentTime.toFixed(2)); 

var currentTime = 2.8349354; 
 
currentTime = parseFloat(currentTime.toFixed(2)); 
 
console.log(currentTime);

所以，你可以只使用這樣的：

var currentTime = parseFloat(this.currentTime.toFixed(2)); 

而且同樣的事情durationNum如果你還需要它是與2位小數的浮動。

---

編輯

你也可以試試這個......應該在所有的瀏覽器。

var currentTime = Math.round(this.currentTime*100)/100;