I add videojs player to my VUE app and I have no idea how to add event listener to it. I need to track when player starts playing and stop or pause. I can't find anything related to it, the documentation doesn't provide this.
Here is how my setup looks like according to docs
this.player = videojs(this.$refs.videoPlayer, this.options, () => {
this.player.log('onPlayerReady', this);
})
Alright, this is just
this.player.on('play', () => {
this.play()
})
this.player.on('pause', () => {
this.stop()
})
VideoJS uses the HTML5 <video> element, so you can just use the events associated with that element.
Example:
document.querySelector(".video").addEventListener("play", (e) => {
console.log("playing...");
});
document.querySelector(".video").addEventListener("pause", (e) => {
console.log("paused...");
});
<link href="https://vjs.zencdn.net/7.20.1/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.20.1/video.min.js"></script>
<video class="video-js video" controls preload="auto" width="640" height="268" data-setup='{ "playbackRates": [0.5, 1, 1.5, 2],"loopbutton": true }'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>
Related
I have a video gallery, each item looks like
<video muted="" allowfullscreen="" autoplay="" controls="" controlslist="nodownload noplaybackrate" disablepictureinpicture="" class="story loop="" poster="" style="max-height: 500px; width: 349px;" id="">
<source src="https://example.com/video.mp4" type="video/mp4">
</video>
They have to look like gifs - on autoplay, and if user switches on the sound on one of the video, the others have to became muted, because now it's possible to switch on the sound on more then one video, and it's too much sound.
I tried already that ways, and they didn't help
1
jQuery('video').on('volumechange', function() {
jQuery('video').attr('muted');
jQuery(this).removeAttr('muted');
})
2
jQuery('video').on('volumechange', function() {
jQuery('video').prop('muted', true);
jQuery(this).prop('muted', false);
})
3 - with the Class
jQuery('video').on('volumechange', function() { jQuery('video').removeClass('sound'); jQuery(this).addClass('sound'); jQuery('video').attr('muted'); jQuery('video.sound').removeAttr('muted');
})
and 4 - the native js after clothing jquery tag
const videoElements = document.getElementsByTagName('video');
for (const currentVideoElement of videoElements) {
currentVideoElement.addEventListener('volumechange', () => {
for (const otherVideoElement of videoElements) {
if (otherVideoElement !== currentVideoElement) {
otherVideoElement.muted = true;
}
}
});
}
What else could help, where I'm wrong?
Would be very good if no extra libraries needed.
The site itseldf
I'm use a tag html5 video + hls.js for video streaming .m3u8
<div class="container-video">
<video id="video"
width="700"
height="400"
preload="auto"
controls>
<source [src]="videoLink" type="application/x-mpegURL">
</video>
</div>
playVideoLive(videoLink) {
const video = document.getElementsByTagName('video')[0];
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoLink);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoLink;
video.addEventListener('canplay', function () {
video.play();
});
}
}
Hoe i can show the dropdown with the list of quality video?
You can use an extra package to add the a track selector - there may be others but this one seems quite popular: https://www.npmjs.com/package/videojs-hls-quality-selector
You can also add your own controls and do it via the API using: https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlscurrentlevel
There is a demo which uses the API here (at the time of writing) - go to the bottom of the demo page to see the levels and you can click on them there: https://hls-js-dev.netlify.app/demo/
I switched to VideoJS thanks to ridicilious pricing policy of JWPlayer.
The problem is, when the user starts the video on iOS, it toggles native fullscreen. I want control panel to be available on fullscreen mode but I couldn't manage it yet.
Code:
<video id="tvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="..." data-setup='{"language":"en", "controls": true,"autoplay": false, "fluid": true, "aspectRatio": "16:9", "playbackRates": [0.5, 1, 1.5, 2]}'>
<source src="..." type='video/mp4' label='240p' res='240'/>
<source src="..." type='video/mp4' label='360p' res='360'/>
<source src="..." type='video/mp4' label='720p' res='720'/>
<p class="vjs-no-js">Bu videoyu görüntülemek için lütfen JavaScript'i etkinleştirin.</p>
</video>
<script type="text/javascript">
var myPlayer = videojs("#tvideo");
myPlayer.videoJsResolutionSwitcher({
default: 'high',
dynamicLabel: true
});
myPlayer.persistvolume({
namespace: 'httpswwwseyredelimcom'
});
myPlayer.brand({
image: "...",
title: "...",
destination: "...",
destinationTarget: "_top"
});
myPlayer.ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableModifiersForNumbers: false
});
$(".bAd").detach().appendTo(".video-js");
$(".plAd").detach().appendTo(".video-js");
function resizeVideoJS() {
var containerWidth = $('.video-player').width();
var videoHeight = Math.round((containerWidth / 16) * 9);
myPlayer.width(containerWidth).height(videoHeight);
}
window.onresize = resizeVideoJS;
myPlayer.on("ended", function() {
startNextVideo();
});
});
</script>
How could I manage not getting autofull screen and let user have control panels on fullscreen?
Thanks in advance.
To preserve inline playing, add playsinline attribute to video tag.
Actually, this won't work as described for video.js. It works for the straight-up html5 player.
For video.js, you need to use .playsinline(true) as you do so set other properties on an object. You could call it on .ready().
This method worked for me:
instanceName.ready(function(){
myPlayer = this;
myPlayer.playsinline(true);
});
https://docs.videojs.com/player#playsinline
I have a problem to get out the duration of an mp4 video file when the html document is ready. My code:
(function ($, root, undefined) {
$(function () {
'use strict';
$(document).ready(function() {
var duration = $("section:first-child() video").get(0).duration;
alert(duration);
});
});
});
The script works in firefox but in chrome it returns an NaN. Im not a javascript professional and i use wordpress HTML5 Blank theme.
Thanks for your help and best regards.
You need to preload the video metadata for you to be able to access them. Then, within the loadedmetadata event, you may access the duration as below.
$(function() {
var $video = $('#video_container').find('video');
$video.on("loadedmetadata", function() {
$('#duration').text($video[0].duration);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video_container">
<video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="metadata" controls="" width="400">
<source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
<source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
<source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
<div>Total duration : <span id="duration"></span></div>
you need a listener to get the duration of a video
var videoTime = 0;
var currentvideo = document.getElementById('video');
currentvideo.addEventListener('play', function() {
videoTime= currentvideo.duration;
console.info(videoTime) // get the duration
});
My HTML5 Video Control API got a shape. But now the client asks me to show Poster once video played.
Now there is a dark black background.
Please let me know how I have to do that.
<video width="640" height="360" x-webkit-airplay="allow" poster="asserts/poster.png" preload="" tabindex="0" class="video1">
<source data-quality="sd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4"></source>
<source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.mp4"></source>
<source data-quality="sd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.webm"></source>
<source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.webm"></source>
</video>
And the Jquery funciton for play/ pause is:
/* Play/Pause */
var gPlay = function() {
if($hdVideo.attr('paused') == false) {
$hdVideo[0].pause();
$video_main_control.removeClass("hd-video-main-control-none");
$hdVideo[0].poster.show();
}
else {
$hdVideo[0].play();
$video_main_control.addClass("hd-video-main-control-none");
}
};
$video_main_control.click(gPlay);
$hd_play_btn.click(gPlay);
$hdVideo.click(gPlay);
$hdVideo.bind('play', function() {
$hd_play_btn.addClass('hd-paused-button');
});
$hdVideo.bind('pause', function() {
$hd_play_btn.removeClass('hd-paused-button');
});
$hdVideo.bind('ended', function() {
$hd_play_btn.removeClass('hd-paused-button');
});
<video width="640" height="360" x-webkit-airplay="allow" poster="asserts/poster.png" preload="" tabindex="0" class="video1" id="video_elem">
</video>
var showBanner = function () {
// Show your banner
};
document.getElementById("video_elem").addEventListener("ended",showBanner, false );
Video api has "ended" event for this purpose. Ref: https://developer.mozilla.org/en-US/docs/DOM/Media_events