[英]How to create a offset plugin for HTML5 video player
Am trying to create a offset plugin to play a portion of the video from full video in HTML5 video player, there is the plugin available for video.js videojs-offset plugin , now am trying to convert this plugin to work with HTML5 player alone 我试图创建一个偏移插件来播放HTML5视频播放器中完整视频的一部分视频,有一个可用于video.js videojs-offset插件的插件 ,现在正试图将该插件转换为仅可与HTML5播放器一起使用
Source of videojs offset plugin videojs偏移插件的来源
(function() {
"use strict";
var a = function(a) {
var b;
return this._offsetStart = a.start || 0, this._offsetEnd = a.end || 0, b = this.constructor, b.__super__ && b.__super__.__offsetInit || (b.__super__ = {
__offsetInit: !0,
duration: b.prototype.duration,
currentTime: b.prototype.currentTime,
bufferedPercent: b.prototype.bufferedPercent,
remainingTime: b.prototype.remainingTime
}, b.prototype.duration = function() {
return this._offsetEnd > 0 ? this._offsetEnd - this._offsetStart : b.__super__.duration.apply(this, arguments) - this._offsetStart
}, b.prototype.currentTime = function(a) {
return void 0 !== a ? b.__super__.currentTime.call(this, a + this._offsetStart) - this._offsetStart : b.__super__.currentTime.apply(this, arguments) - this._offsetStart
}, b.prototype.remainingTime = function() {
var a = this.currentTime();
return a < this._offsetStart && (a = 0), this.duration() - a
}, b.prototype.startOffset = function() {
return this._offsetStart
}, b.prototype.endOffset = function() {
return this._offsetEnd > 0 ? this._offsetEnd : this.duration()
}), this.on("timeupdate", function() {
var a = this.currentTime();
0 > a && (this.currentTime(0), this.play()), this._offsetEnd > 0 && a > this._offsetEnd - this._offsetStart && (this.currentTime(this._offsetEnd - this._offsetStart), this.pause())
}), this
};
a.VERSION = "0.0.0", window.vjsoffset = a, window.videojs.plugin("offset", a)
}).call(this);
What is the way i need to try this could work with HTML5 video player alone ? 我需要怎样尝试才能单独与HTML5视频播放器一起使用?
This seems like something you could easily do with a minimal amount of code. 这似乎可以用最少的代码轻松完成。 I'd suggest writing something like this:
我建议写这样的东西:
function videoSegment(elementOrQuery, start, stop){ var element = typeof elementOrQuery === 'string' ? document.querySelector(elementOrQuery) : elementOrQuery; element.currentTime = start; // While playing, check if time is within bounds element.addEventListener('timeupdate', function(){ if(element.currentTime < start) element.currentTime = start; if(element.currentTime > stop) element.pause(); }); // When starting to play make sure its within bounds element.addEventListener('play', function(){ if(element.duration > stop || element.duration < start) element.currentTime = start; }); // When pausing, check if theres a loop and repeat or reset to beginning element.addEventListener('pause', function(){ if(element.currentTime > stop) element.currentTime = start; if(element.loop) element.play(); }); } videoSegment('video', 2, 4);
<video controls autoplay loop> <source src="http://techslides.com/demos/sample-videos/small.mp4" /> </video>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.