Question

这是我正在使用的JS和HTML：

//  This code idea came from the posting here:		 
//       https://stackoverflow.com/questions/19175174/
//
// I tested this on 3 versions and it works the first time on all.
// if you hold down the 'shift' key and hit the reload' button
//  (which bypasses the cache and forces a FULL reload), 
//  it will work on successive invocations.
// However, it just hit the 'reload' button, it fails...it locks up.
//      I see this same behavior on Chrome, Firefox, and Opera.
//      (Mysteriously, it seems to work fine on Edge)
//  For various release choices, see:    
//	https://github.com/videojs/video.js/releases  
// (I tested this on v5.11.9  v6.8.0 and 7.4.1 )

// global or parent scope of handlers:
var videoElem = document.getElementById("videoID");
var i = 0;
			
videoElem.addEventListener('loadeddata', function() {
    //console.log("loadeddata entered");
    this.currentTime = i;
});

function generateThumbnail(i) {   
    //console.log("generateThumbnail entered");
    //generate thumbnail URL data
    // 		(This next line was missing...I added it)
    var thecanvas = document.createElement('canvas');
    var context = thecanvas.getContext('2d');
    context.drawImage(videoElem, 0, 0, 110, 76);
    var dataURL = thecanvas.toDataURL();

    //create image
    var imgElem = document.createElement('img');
    imgElem.setAttribute('src', dataURL);

    //append img in container div
    document.getElementById('thumbnailContainerID').appendChild(imgElem);
}

// This "SEEKED" event seems to be what is mis-behaving :
videoElem.addEventListener('seeked', function() {
    // now video has seeked and current frames will show
    // at the time as we expect
    generateThumbnail(i);

    // when frame is captured increase here by 10 seconds
    i += 10;

    // if we are not passed end, seek to next interval
    if (i <= this.duration) {
        // this will trigger another seeked event
        this.currentTime = i;
    }
    else {
	// Done!, next action
    }
});

<video id="videoID"  class="video-js vjs-default-skin  vjs-big-play vjs-big-play-centered" 
							data-setup='{"playbackRates": [1, 2, 3, 4] }'  oncontextmenu="return false;"  controls>
				<source src="Sintel---2minutes.mp4" type="video/mp4" />
				<b style="color:Red">Whoops.  Sorry...your browser does not support the html5 'video' tag.</b><br />
</video>

<!--video id="videoID"  controls>
				<source src="Sintel---2minutes.mp4" type="video/mp4" />
				<b style="color:Red">Whoops.  Sorry...your browser does not support the html5 'video' tag.</b><br />
</video-->

<p>These are the resulting images:</p>
<ol id="thumbnailContainerID"></ol>	<!-- an ORDERED LIST  -->

=========================== 但是，如果您注释掉引用video-js的视频标签，取消注释下面的通用视频标签，您会发现JS 每次您按下浏览器重新加载按钮时都可以使用。

因此，我必须得出结论，Video-js中存在严重的错误。

支持此主张。我在这里另外提供了三个帖子，似乎密切相关，即：

Capture frames from video with HTML5 and JavaScript （尤其是查看用户“ Michael”的评论）

Videojs Control Bar not updating with video

Set new startTime and endTime on videojs

VideoJS中“寻求”事件的长期问题

0 个答案: