I am using AMP story player but it is not autoplay bydefau it. Even I set autoplay is true.
It works when I click on it. please suggest a possible solution.
Related
In the following site https://www.ilmiomedicolegale.it/ I have inserted carousels with autoplay on the mobile side (unfortunately using Elementor).
Autoplay starts as soon as you arrive on the site, my intention is to make them start as soon as they are visible on the screen or at least as soon as the section is visible.
In order to reach the certain sections through the menu items and view the beginning of the various slides in the correct order.
Do you know how I can intervene? I have knowledge of JavaScript but I really don't know where to put my hand for the solution..thanks in advance!
PS. I have seen that it uses Swiper Js
Ok Let me explain my situation, I am trying to build a Cover section for a profile page, where users can set either an image or a video as their cover.
I am unsure how to render both a video file and an image file based on the provided file URL.
I tried to find a similar project, but I found none.
Can you guys help me with how to accomplish this?
Yes you can do if just use Vide tag and put the same url in poster and src
<video width="100px" poster="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" muted autoplay loop ></video>
<video
width="100px" poster="https://clashdome.io/images/newHome/video_home.mp4" muted autoplay>
<source src="https://clashdome.io/images/newHome/video_home.mp4" type="video/mp4">
</video>
so if its a video then it will run as a video if its a image then it will render as image, also idk if its correct according to accessibility but its pretty clean and does the job perfectly
Use case: I have a client who'd like on their homepage to have a gif version of a video that, when clicked, opens up a full screen video player. How can I manage this? I've been building the site in the NextJS framework.
I'm looking to do something like this but instead of autoplaying an mp4, auto loop a gif of the video and, upon clicking the gif, play mp4 in fullscreen.
Any help would be greatly appreciated - I've never really messed with videos in React.
There is no one way to do this but the beauty of React are components. You are definitely going in the right direction. I would actually do two separate components, one for background and one with the video player. That is cleaner and good practice to separate concerns in code.
Simply swap components conditionally, as in this simplified example;
if(onclick) {
render (
<Player />
) else {
<Index />
}
}
You can very well use state to set the conditions. The only problem in React is that components technically do not share state but on the other hand, the "background component" only needs to know if its in the foreground and if it receives an onClick event. The video component only needs to know about its own onClick to for it to disappear again. So two separate event handlers is no issue in this very specific case.
i would create a react state and set it to false
then onClick of the gif i will update the state to true
then have a conditional statement to show the video in fullscreen when the state turns to true
and set the state back to false when video is removed from full screen
I want to play video when user comes to the page, it is working fine for all the platform except IOS.
I am using react-player npm. I have tried by passing muted property but doesn't work.
My code looks like this
<ReactPlayer playing=true url="video_url" muted loop=true />
Thanks in advance !
I think you need the playsInline attribute for iOS autoplaying in non-fullscreen, as per https://webkit.org/blog/6784/new-video-policies-for-ios/:
On iPhone, elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
react-player supports it as a prop.
Note that I is uppercase playsInline
// Example #1
<video playsInline />
// Example #2
<Player playsInline attr={someValue}>
I have a video tag.
<video id="video1" poster="{{video.poster}}" ng-click="video.playIt()" controls>
<source src="source.mp4" type="video/mp4">
</video>
I want to be able to click my video's poster or the controls to start the video.
Then be able to pause and play the video by the video's controls or clicking anywhere inside the video element.
Here is my app.js...
$scope.video.playIt = function() {
if (jQuery("#video1").get(0).paused) {jQuery("#video1").get(0).play();}
else {jQuery("#video1").get(0).pause();}
}
At the moment I can start the video by clicking on the poster, and pause / play it by clicking on the video's element. However the controls do not work.
I think there may be a conflict with ng-click. I have added one but I think the video may have one already attached which is why there is a conflict.
Any help would be appreciated.
Thanks