I would like to remove volume control on videojs player.
Anyway, when the user click on fullscreen, thevolume control must appear again.
So I want to remove volume control only when the player is not on fullscreen. Is it possible in videojs?
const videoplayer = videojs('video-player', {
controlBar: {
'pictureInPictureToggle': false,
'volumePanel': false,
}
});
video.js uses styles for states such as fullscreen, so you can control this with CSS:
.video-js .vjs-volume-menu-button {
display:none;
}
.video-js.vjs-fullscreen .vjs-volume-menu-button {
display:block;
}
Related
I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:true,
items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});
Appreciated the answer from expert out here.
Thank you.
I made this work with the help of OwlCarousel2 events.
There are 2 events we can use together for this purpose:
drag.owl.carousel fires when user start to drag
dragged.owl.carousel fires when dragging finished
And this make it work like how we want it:
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
});
owl.on('drag.owl.carousel', function(event) {
$('body').css('overflow', 'hidden');
});
owl.on('dragged.owl.carousel', function(event) {
$('body').css('overflow', 'auto');
});
So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.
This works on iOS & VueJS.
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
})
// disable scroll
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
})
// enable scroll
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
})
look for the below piece of code in custom.js file of your project
Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,
mouseDrag: true,
touchDrag: true,}
change the things to below:-
touchDrag:false,
and owl-carousel will simply stop scrolling horizontally both on mobile and desktop drag!
For owlcarousel2, you can use mouseDrag option.
$('.owl-carousel').owlCarousel({
mouseDrag:false
});
Reference https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
in owl.js
mouseDrag: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,
USING VIDEO.JS in Adobe Muse
Currently I have poster image configured to display at beginning of video,
when video has concluded I'd like the poster image to re-appear. Thanks for any help!
In the future the best way to do this will be through css. I just added an issue for it.
.video-js.vjs-ended .vjs-poster {
display: block;
}
For now there's two ways using javascript that should work.
var myPlayer = videojs(myId);
myPlayer.on('ended', function(){
this.posterImage.show();
});
// or
myPlayer.on('ended', function(){
this.trigger('loadstart');
});
You'll want to test both for your specific use case.
This worked for me! Video JS 6.6
var video_player;
$(document).ready(function()
{
// 'videoplayer' is the ID of our <video> tag
videojs("my-video", {}, function()
{
video_player = this;
video_player.on('ended', function()
{
video_player.posterImage.show();
$(this.posterImage.contentEl()).show();
$(this.bigPlayButton.contentEl()).show();
video_player.currentTime(0);
video_player.controlBar.hide();
video_player.bigPlayButton.show();
video_player.cancelFullScreen();
});
video_player.on('play', function()
{
video_player.posterImage.hide();
video_player.controlBar.show();
video_player.bigPlayButton.hide();
});
});
});
You should use the following as specified here
var player = videojs('#example_video_1', {}, function() {
this.on('ended', function() {
player.exitFullscreen();
player.hasStarted(false);
});
});
For video.js version 7.8.1 in 2020, following #chukwuma-nwaugha answer, I ended up with this:
var options = {};
var player = videojs('example_video_1', options, function onPlayerReady() {
this.on('ended', function() {
if (player.isFullscreen()) {
player.exitFullscreen();
}
player.hasStarted(false);
});
});
This worked for me:
/* Show poster when paused or stopped */
.video-js.vjs-default-skin.vjs-paused .vjs-poster {
display:none !important;
}
.video-js.vjs-default-skin.vjs-ended .vjs-poster {display:block !important;}
I am using VideoJS 5.12.6. None of the solutions above worked for me. I ended up using:
myPlayer.on('ended', function(){
$('body .vjs-poster').fadeIn();
});
I upvoted #heff's reply following the downvote as CSS is working in July 2018.
After the class:
.vjs-has-started .vjs-poster {
display: none;
}
Add the class:
vjs-ended .vjs-poster {
display: inline-block;
}
That will restore the poster to its default visible state. The vjs-ended class must come after the vjs-has-started class unless you want to increase the class specificity.
This is working for me on two separate projects. I love the way Video.js allows me to do so much in CSS without having to struggle with JavaScript.
You can use css to display poster image :
.video-js.vjs-ended .vjs-poster {
display: block;
}
Please note : you must remove poster attribute from html video tag :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
To be like that :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
data-setup="{}">
I'm trying to hide a video while it's loading (e.g. the black window with just a loading spinner). The only class I've found that sort of made sense is the .vjs-has-started one but the loading screen still shows with the following CSS. I also didn't see anything in the javascript api that meets this need (sorry if I missed something).
.video-js {
display: none;
visibility: hidden;
}
.video-js.vjs-has-started {
display: block;
visibility: visible;
}
I've also tried adding .vjs-playing into the mix both in place of an in conjunction with .vjs-has-started. Any thoughts on getting this to work or a answer about why it won't currently would help. If I need to I can work on adding this to video.js if it's not already there but I first wanted to get your definitive answer on the current state of video.js for this functionality.
I added the vjs-waiting class to be able to accomplish this now vjs-waiting can be used in css to show and hide the content see the pull-request for more details.
Example:
.vjs-waiting {
visibility: hidden;
background: transparent;
}
.vjs-loading-spinner {
display: none !important;
}
Reference - https://github.com/videojs/video.js/pull/1351
You could use the vjs-waiting
.vjs-waiting {visibility: hidden;}
Hey I have been struggling with this too, Docs are not intuitive at all!
Im implementing Video JS in React Hooks, so I solved with loadingSpinner set to false;
useEffect(() => {
let player = videojs('my-player',{
autoplay: 'muted',
sources: [
{
src: videoUrl, // m3u8 format
type: "application/x-mpegURL"
}
],
controlBar: false,
loadingSpinner: false
});
player.play()
return () => {
player.dispose()
}
}, [])
Hope it helps! =)
I'm using the Strobe media player (with OSMF). I need to re-size the player when someone clicks a re-size button (built into the player). How can i do this? I've searched high and low but found no results.
Set scaleMode to "letterbox", then the player automatically adjusts its size depending on its parent div. You can then change its size, for example using jquery:
function getHeight() { return $(window).height(); };
function getWidth() { return $(window).width(); };
$(window).resize(function () {
$("#strobemediaplayback").css({ height: getHeight(), width: getWidth() });
});
I'm embedding Youtube's experimental HTML5 iframe capabilities in a website through use of the javascript API:
YouTube Player API Reference for <ifram> Embeds
I'm aware of the z-index issues this brings about, and the fix that involves adding wmode=opaque (or wmode=transparent) to the iframe url:
Fixed. My Youtube iframe z-index is ignored and is above a fixed div
When just using the javascript API, how do you set wmode to opaque:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
// if I try adding wmode: opaque here, it breaks
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1
// if I try adding wmode: opaque as a playerVar here, it breaks
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Any ideas?
Hmmmm...
Well, it appears I was hasty in posting the question. It appears that the correct form for setting wmode within the API is:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1,
wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Hopefully this helps someone else.
As far as I can tell it is the default to be opaque. I tested changing wmode to transparent, opaque and removed it. When it wasn't specified it was automatically set to opaque.
I'm not sure if this always was the case, but it definitely is now.
Also remember this only applies when using the Flash player. You can disable the HTML 5 player to test this which is the default with the 'Disable Youtube™ HTML5 Player' plugin. Then just inspect element and drill down till you find the EMBED tag.