[英]Display video duration from videoJS
I am working on an HTML5 video player with jQuery.我正在使用 jQuery 开发 HTML5 视频播放器。 For now I have my video player working very well but I want to get the variable for the video duration and show/display it in pure HTML page.
现在我的视频播放器运行良好,但我想获取视频持续时间的变量并在纯 HTML 页面中显示/显示它。
So from here you can take more info about this Jquery video player: http://www.videojs.com/docs/api/因此,您可以从这里获取有关此 Jquery 视频播放器的更多信息: http://www.videojs.com/docs/api/
I think the variable for video duration is: myPlayer.duration();
我认为视频持续时间的变量是:
myPlayer.duration();
How I can display this value in HTML?如何在 HTML 中显示此值?
Here is my HTML code to display the player:这是我的 HTML 代码来显示播放器:
<video id="vemvo-player" class="video-js vjs-default-skin" controls autoplay="true" width="950" height="534"
data-setup="{}">
<source src="[var.base_url]/uploads/[var.video_play]" type='video/flv' />
</video>
This is what I have tried to display this variable but it says that it is = "0" when on the video player it says that it's 4min:这是我试图显示此变量的内容,但它说它是 =“0”,而在视频播放器上它说它是 4 分钟:
<video id="vemvo-player" class="video-js vjs-default-skin" controls autoplay="true" width="950" height="534"
data-setup="{}">
<source src="[var.base_url]/uploads/[var.video_play]" type='video/flv' />
</video>
<div id="duration"></div>
<script type="text/javascript">
_V_("vemvo-player").ready(function(){
var myPlayer = this;
var howLongIsThis = myPlayer.duration();
$('#duration').html('Duration: ' + howLongIsThis);
});
</script>
Where is my mistake?我的错误在哪里?
You can try this.你可以试试这个。 It worked for me.
它对我有用。
var myPlayer = videojs('vemvo-player');
if (myPlayer.readyState() < 1) {
// wait for loadedmetdata event
myPlayer.one("loadedmetadata", onLoadedMetadata);
}
else {
// metadata already loaded
onLoadedMetadata();
}
function onLoadedMetadata() {
alert(myPlayer.duration());
$('#duration').html("Duration: " + myPlayer.duration());
}
var player = videojs('my-video', {
fluid:false, // videojs settings
controls:true,
height: '300'
});
$(document).ready(function(){
console.log(player.duration());
// will return video duration. Can't be used while page is loading.
console.log(player.currentTime());
// will return current time if video paused at some time. Intially it would be 0.
});
As you're using jQuery, that can be done much easier :) You can use $.html to edit the html contents of a dom element.当您使用 jQuery 时,这可以更容易完成 :) 您可以使用$.html来编辑 dom 元素的 html 内容。 Your code will look something like this:
您的代码将如下所示:
<div id="duration"></div>
<script type="text/javascript">
_V_("vemvo-player").ready(function(){
var myPlayer = this;
var howLongIsThis = myPlayer.duration();
$('#duration').html('Duration: ' + howLongIsThis);
});
</script>
Those who might come here and are using videojs with Vue 3, also might work with similar frameworks like React.那些可能来到这里并在 Vue 3 中使用 videojs 的人,也可能使用类似的框架,如 React。
Referring to this code and component usage - https://docs.videojs.com/tutorial-vue.html you can do the following changes to get the duration, height, and width.参考此代码和组件使用 - https://docs.videojs.com/tutorial-vue.html,您可以进行以下更改以获取持续时间、高度和宽度。
// New Code here
this.player = videojs(
this.$refs.videoPlayer,
this.options,
function onPlayerReady() {
console.log("onPlayerReady", this);
}
);
this.player.one("loadedmetadata", () => {
var duration = this.player.duration();
console.log(`Duration of Video ${duration}`);
console.log(`Original Width of Video ${this.player.videoWidth()}`);
});
I was having troubles to get the real duration of videos (using videojs v7.18.*) resulting in bugged custom progressbar!我很难获得视频的真实持续时间(使用 videojs v7.18.*),导致自定义进度条出现错误! The problem was that
player.duration()
always returns rounded number while player.liveTracker.seekableEnd()
returns the real value but only after start
event.问题是
player.duration()
总是返回四舍五入的数字,而player.liveTracker.seekableEnd()
返回实际值但仅在start
事件之后。
For example, if real duration is 13.456s, these values are returned for videojs player object p
:例如,如果实际持续时间为 13.456 秒,则为 videojs 播放器 object
p
返回这些值:
| On ready | On load | On start
----------------------------|-------------|---------|----------
p.duration() | 0 | 14 | 14
p.liveTracker.seekableEnd() | 14 | 14 | 13.456
I've ended up with this solution in React:我最终在 React 中得到了这个解决方案:
const onDurationChange = () => {
const dur = player?.liveTracker.seekableEnd() || player?.duration() || 0;
setDurationInSec(dur);
}
return <video ref={videoRef} onDurationChange={onDurationChange}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.