I am using Video.js plugin to show videos on my website.
I want to remove the picture in picture icon. I have tried for several hours but no success.
<video controls preload="auto" poster="path to poster" data-setup='{controllBar: {pictureInPictureToggle: false}}'>
<source src="path to video" type="video/mp4" />
</video>
What am I doing wrong?
It should be data-setup='{"controlBar": {"pictureInPictureToggle": false}}', with quotes (it's a JSON string) and one l in 'controlBar'.
Note this will remove Video.js's control bar button but not Firefox's Picture-in-Picture floating button. Whether Firefox displays that is only configurable by the end-user.
Read About Picture-in-Picture in Firefox
You can also pass it in as options to the videojs constructor.
const player = videojs(videoElement, {
controls: true,
controlBar: {
pictureInPictureToggle: false
}
}, function() {
})
Add this css:
.video-js .vjs-picture-in-picture-control { display: none; }
There's a full example here:
https://weasel.firmfriends.us/Private3-BB/
To remove the toggle completely, and not just disable it.
After player initialised:
player.controlBar.removeChild(player.controlBar.getChild('PictureInPictureToggle'));
Related
I am showing a div width Text over the poster image while the video is loading and when the video is paused.
How can I detect the moment the video is fully loaded and autoplay starts? Because then, the div should be hidden.
It you have defined autoplay then detect using the play event:
video.onplay = function() { /* remove overlay here */ };
alternatively use canplay or canplaythrough when you want to manually trigger play.
I have a videojs player. I want to chage play icon in controlbar with replay icon when the video has end.
You can see like youtube player :
This is my code :
<script>
videojs("my_video_1").ready(function(){
var vid = this;
vid.on("ended", function(){
alert ("I want to change play icon in cotrolbar with replay icon");
// i dont know to chage play icon when the video is finish
});
});
This is my full code. You can run it via jsbin: http://jsbin.com/fijefi/2/
thank you
You don't even need javascript to do this. You can change the play icon via CSS.
In the default LESS file there are two states for the play button:
.vjs-default-skin .vjs-play-control:before {
content: #play-icon;
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
content: #pause-icon;
}
You just need to add a third state when the video has ended. There is already a CSS class for that. You'll end up with something that looks like:
.vjs-default-skin.vjs-ended .vjs-play-control:before {
content: "YOUR REPLY ICON";
}
I have designed a tool bar where buttons are there,. My requirement is initially it should display one icon and on mouse over the icon should change. For this i have given a class to the button and applied css for this and for hover property applied cssclass:hover with different image. For Example
.cssclass {
background-image: someimage.jpg
}
.cssclass:hover {
background-image: someotherimage.jpg
}
By this in all browser (chrome and IE) it is working but in Firefox the image is not changing.
Can anybody have any idea how to achieve this?
Thanks
Tapaswini
If this is related to ExtJS 4, then you should be adding a overCls like so:
Ext.create('Ext.Button', {
text: 'Click me',
cls: 'normalcls',
overCls: 'someovercls', // right here!
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
Depending on the ExtJS version, it may apply a prefix of 'x-' to the class name.
I'm working on an Adobe Air application. It's base on html and js. So there are img, input and textarea tags, which will show a native menu when right-click. For example, right click on the img tag, It shows a native menu with save image menu-item.
I've tried using normal javascript methods, like event.preventDefault(), and It doesn't work at all.
So how to prevent those native menus?
I found it very easy to solve this problem after 7 months. It's something about contextmenu.
Example:
Here is an <img> now.
<img src="https://www.google.com/images/srpr/logo4w.png">
Add a contextmenu event listener for it, and prevent its default bebaviour.
<img id="a" src="https://www.google.com/images/srpr/logo4w.png" >
<script>
$('#a').on('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
});
</script>
Then the default menu disappears.
Demo jsfiddle.net
please i need your help folks!
I'm using Anythingslider to slide between HTML5 video and other content, but when I add autoplay attribute in video tag, Anythingslider plays just audio.
Are you sure the video is not hidden behind another element? Play with the z-index as the video should be visible. I've had a few issues with this in the past, such as the video flickering in and out of visibility on scroll.
I ended up playing the videos in a light box since anything slider would leave the video playing as the carousel continued to scroll. Also, if you use an infinite scroller there were also issues with it playing the video in two places.
Providing you are using something like JW Player you will be able to set up some actions to pause the video on slide or similar but basic youtube embeds will be an issue.
Don't add the autoplay attribute to HTML5 video. What is probably happening is that the cloned copy of the video (first and last slides only) is playing the video, but all you hear is the audio since the panel is not in view. The reason you don't want to autoplay is because it will still autoplay even if AnythingSlider starts with another slide visible, and it won't stop until you cycle through the panels.
If you want the video to autoplay when the panel is visible, you'll have to add some script into the completed callback (video extension is not required with the code below; demo):
var playvid = function(slider) {
var vid = slider.$currentPage.find('video');
if (vid.length) {
// autoplay
vid[0].play();
}
};
$('#slider').anythingSlider({
// Autoplay video in initial panel, if one exists
onInitialized: function(e, slider) {
playvid(slider);
},
// pause video when out of view
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof(vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
// play video
onSlideComplete: function(slider) {
playvid(slider);
},
// pause slideshow if video is playing
isVideoPlaying: function(slider) {
var vid = slider.$currentPage.find('video');
return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
}
});