I am using video.js to play a splash screen video in an ionic app. Is it possible to remove the control bar completely from the player?
Yes, there is a controls option responsible for this:
const player = videojs('my-player', {
autoplay: true,
controls: false
});
.video-js .vjs-control-bar{
display: none;
}
Related
What I have
I have made use of IntersectionObserver on my feed page. It behaves like TikTok. Scroll up or down to see the next video. On enter the video plays. On exit, it stops playing.
The Problem
It works on Android and Windows perfectly. On iOS, not so much. The videos are not autoplaying as expected. A bit strange though, is if I click the video (which calls play() on that video), and then scroll it out of view, the video does stop. When I scroll it back into view, it auto plays again. So I know that IntersectionObserver is being recognized, just not triggered initially.
The Code
==================================
The Feed Page, where the Observer is being instantiated:
data() {
return {
observer: null,
}
};
mounted() {
let config = { threshold: 0.1 };
if (process.client) {
if (/iPhone|iPad/i.test(navigator.userAgent)) {
config.root = null;
}
}
this.observer = new IntersectionObserver(function (entries) {
entries.forEach(({ target, isIntersecting }) => {
if (isIntersecting) {
target.play();
} else {
target.pause();
target.currentTime = 0;
}
});
}, config);
beforeDestroy() {
this.observer.disconnect();
},
HTML
<div
v-for="(post, index) in posts"
:key="index"
>
<MobileFeedItem :post="post" :observer="observer" />
</div>
=================================
The MobileFeedItem component
props: ["post", "observer"],
mounted() {
this.$nextTick(() => {
if (this.observer !== null && this.checkMediaTypeIsVideo(this.post)) {
this.observer.observe(
document.getElementById(
`video_${this.getContentId(this.post)}_mobile`
)
);
}
});
HTML
<video
:id="`video_${getContentId(post)}_mobile`"
:data-poster="getThumbnail(post)"
preload="none"
disablePictureInPicture
crossorigin
loop
playsinline
v-lazy-load
class="w-full h-full my-4"
>
<source :data-src="getMedia(post)" type="video/mp4" />
</video>
My Thoughts...
The observer is being instantiated and recognized, just not triggered. So is there a way that I can force the browser to wake up and become aware of the observer without having to click on each of the video elements first?
I found the answer. It wasn't anything wrong with the IntersectionObserver, but because my video was not muted.
"By default, autoplay executes only if the video doesn’t contain an audio track, or if the video element includes the muted attribute. Video playback pauses if the element gains an audio track, becomes unmuted without user interaction, or if the video is no longer onscreen"
source - https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
It also appears that we don't need intersection observer at all for Safari, as it does this for us. Huh.
We have an application in VueJs, in the home page everything works fine.
When we load the page on mobile, we have few problems on scrolling, if we touch the chart and try to scroll the page down, the touch it's like intercepted from the chart and make the scoll impossible.
So in order to scroll the page we have to start scrolling from outside the chart.
I tried to add in the chart options the following events: ['mousemove', 'mouseout', 'click',], thinking that like so it would exclude the touch options, but it dosen't work as well.
I've also tried with the following but no success.
tooltips: {
enabled: false
},
events: [],
Any suggestion? Thankyou so much.
after few hours I've found a solution.
Seems like that in the canvas of the chart there is a css propriety touch-action: none; setting that one to touch-action: unset solved my problem.
<template>
<canvas class="chart-mobile" ref="canvas"/>
</template>
<style scoped>
.chart-mobile {
touch-action: unset !important;
}
</style>
I need to use v-carousel without the bottom control panel. It's useless when number of images more than 20. Is it possible to hide it?
You just need to add the hide-delimiters prop. You can find all carousel props here: VuetifyJS API
<v-carousel hide-delimiters>
[...]
You can do that with css:
.carousel .carousel__controls { display: none; }
I'm using video.js with a custom skin for some videos on an html page.
Everything is working fine except for Safari Mobile iOS 7, cause it doesn't hide the default play button for videos.
I'm using all this css rules
.video-js video::-webkit-media-controls {
display:none !important;
}
.video-js video::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
.video-js video::--webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
.video-js video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
and actually i can see these rules on inspector but they are simply not working.
Is there a way to hide the button or is that a safari bug?
Note: this answer works for controls panel play button and not for big play button over video element
There are different CSS styles for shadow elements on different iOS versions.
For iOS 7 instead of
.video-js video::--webkit-media-controls-play-button
should be
.video-js video::-webkit-media-controls-play-button
Here is a list of all shadow subelements in HTML video element on iOS 7 (I've checked it on my devices):
<div>:
video::-webkit-media-controls
video::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-current-time-display
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-panel
<input type="button">:
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-play-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-volume-slider-mute-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-fullscreen-volume-min-button
video::-webkit-media-controls-fullscreen-volume-max-button
<input type="range">:
video::-webkit-media-controls-timeline
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-fullscreen-volume-slider
I am using sideNav of MaterializeCSS in my application. I do not want to close sideNav while clicking outside. It can be achievable in modals like this:
{ dismissible: false }
How to do this in sideNav?
MaterializeCSS doesn't have a built-in method for achieve this task, but you can use a workaround, unbinding the click event from sideNav overlay:
$(function(){
$(".button-collapse").sideNav();
$(".drag-target").unbind('click');
$("#sidenav-overlay").unbind('click');
});
Update:
As of late, you can modify options of the sidenav by doing the following
$(".button-collapse").sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: false, // clicking outside of the nav will not close it
draggable: true, // Choose whether you can drag to open on touch screens,
onOpen: function(el) { }, // A function to be called when sideNav is opened
onClose: function(el) { }, // A function to be called when sideNav is closed
});
});
you can take a look here to learn more: http://materializecss.com/side-nav.html