I'm trying to build a simple landing page that contains a fullscreen background image, that will play as soon as the content loads.
Is there a way to do this using React or CSS inside of React?
I've tried using the npm module react-drive-in, but I can't for the life of me figure out how to load my React components over the video. The video keeps loading over my other components.
import sample from './sample.mp4';
<video className='videoTag' autoPlay loop muted>
<source src={sample} type='video/mp4' />
</video>
Thank the note that 'autoplay' should be changed to 'autoPlay' from Mr_Antivius.
This is an alternative way to play the video in React. It works for me. Remember that the sample.mp4 file is in the same directory of the JS file.
Actually, I was able to get Trevor's code working just fine in my project. I did have to add a closing tag to the source element, like so.
<video id="background-video" loop autoPlay>
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" />
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg" />
Your browser does not support the video tag.
</video>
Also, note that 'autoplay' should be changed to 'autoPlay' or React will throw a warning at you and not auto play the video. Outside of those two changes, copying and pasting the code should work just fine.
ES6/Babel example:
'use strict';
import React, {Component} from 'react';
class Example extends Component {
constructor (props) {
super(props);
this.state = {
videoURL: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'
}
}
render () {
return (
<video id="background-video" loop autoPlay>
<source src={this.state.videoURL} type="video/mp4" />
<source src={this.state.videoURL} type="video/ogg" />
Your browser does not support the video tag.
</video>
)
}
};
export default Example;
I think something like this will work:
#background-video{
height: 100%;
width: 100%;
float: left;
top: 0;
padding: none;
position: fixed; /* optional depending on what you want to do in your app */
}
<video id="background-video" loop autoplay>
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
You may run into problems with ratios depending on the video you use or the size of the clients screen.
So you may need to check out this post.
Also consider the size of screens today. What are you going to do if someone has a ridiculously large widescreen or something like that? The video will not be able to fit the screen unless you have video that has the same resolution.
I'm not suggesting a video is a bad idea. I simply want you to be aware of the problems!
Good luck!
The below code also sets a poster. That is shown while the video loads or in browsers that can't play the video.
import clip from './clip.mp4';
import Poster from './Poster.png';
<video autoPlay loop muted poster={Poster}>
<source src={clip} type='video/mp4' />
<source src={clip} type="video/ogg" />
</video>
But,its a good practice to show that background video only on larger devices. Because on mobile phones background video may take up too many system resources and effects the performance.So,add a media query and set display:block for mobile devices.
Related
Video background from site header not showing on iPhone. I read that need to specify attributes, but they were already there except of 'preload'. Ive just added all necessary attributes additionaly, but it did not help :(
This code Ive added.
<script>
$(document).ready(function(){
var video_header = $('video');
video_header.prop('preload','auto');
video_header.prop('autoplay','true');
video_header.prop('loop','loop');
video_header.prop('playsinline','playsinline');
video_header.prop('webkit-playsinline','');
video_header.prop('muted','true');
});
</script>
Btw, chrome dev tools on Iphone 12 pro display everything.
<video loop="" autoplay="" playsinline="" muted="" preload="auto" id="mejs_5217348005770652_html5" src="https://suik.online/wp-content/uploads/2022/11/50-mb.webm" style="margin: 0px; width: 390px; height: 780px;">
<source type="video/webm" src="https://suik.online/wp-content/uploads/2022/11/50-mb.webm">
</video>
Web-site
Thanks for any help.
To see it work on an iPhone
Currently, WebM video playback is not available on iPhone. If you want to play WebM files on iPhone, you need to have mp4 file format as well.
iOS version 14.4
Desired outcome:
video autoplays on page load
Video doesn't have an audio track, and I am muting it too.
I am able to get the video tag to work on iOS when I run it directly through static HTML, like
<video id="anshul-video" poster="..." src="..." playsinline="" webkit-playsinline autoplay="" preload="auto" loop="" muted="">
<source id="something_else" src="..." type="video/mp4">
</video>
BUT when I do it through Web Components, it doesn't work. Such as
export default class anshulCommonHeroFeatures extends HTMLElement {
connectedCallback() {
this.setHeroFeatures();
}
setHeroFeatures() {
const commonHeroFeaturesTemplate = document.createElement('template');
commonHeroFeaturesTemplate.innerHTML = `<video id="..." src="..." playsinline="" autoplay="" preload="auto" loop="" muted="">
<source id="something_else" src="..." type="video/mp4"
</video>`;
this.appendChild(commonHeroFeaturesTemplate.content.cloneNode(true));
}
}
window.customElements.define('anshul-common-hero-features', anshulCommonHeroFeatures);
The Web Component code works everywhere else. It works on Desktop browsers. It works on Android phone's Chrome. WebComponent page is only failing on iOS.
Any clue or suggestion is welcome.
I had the exact same issue. To overcome this, I checked for the video tags in the DOM of the webcomponent (after the appendChild), cloned each video node, and replaced the origin video tags with clones.
let videos = this.querySelectorAll('video');
videos.forEach(vid => {
vid.parentNode.insertBefore(vid.cloneNode(), vid);
vid.parentNode.removeChild(vid);
});
This isn't ideal as it could break references to the older nodes, but at least it fixes the autoplay issue.
I'm building a webpage where I have several video, so I've exported 2 different media for each of them: one high quality to show on desktop and a lower quality one to show on mobile.
To do so I styled my video element like this:
<video autoplay muted loop playsinline id="video-1">
<source class="mob-hidden" src="video-1.mp4" type="video/mp4">
<source class="des-hidden" src="video-1-low.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
where mob-hidden and des-hidden are css classes with a display: none; to prevent them to appear in mobile or desktop.
The problem is that I noticed that when on mobile and desktop the page still downloads both video versions even if it uses just one, so I guess that using css classes is not enough.
Can you help understand how to prevent the webpage to download media that it's not going to use? so low-quality video when on desktop and high-quality videos when on mobile.
Thank you very much!
Try this:
<video controls>
<source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
<source src="the-sky-is-calling-large.webm" media="screen and (min-width:800px)">
<source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
<source src="the-sky-is-calling-small.webm" media="screen and (max-width:799px)">
</video>
I can see 3 potential approaches here
Checking width of the page in CSS
Since your video have two differences classes , you could code something like this
.des-hidden{
display: none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
.des-hidden{
display:none
}
.mob-hidden{
display: block;
}
}
BUT you'll have to change your HTML to something like this, to make it work
<video autoplay muted loop playsinline id="video-1" class="mob-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<video autoplay muted loop playsinline id="video-2" class="des-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Checking width of the page in JS
You could use something like this changing your classes for IDs:
window.addEventListener("resize", function(event) {
if (document.body.clientWidth <= 768) {
document.getElementById("des-hidden").style.display = "none";
document.getElementById("mob-hidden").style.display = "block";
} else {
document.getElementById("des-hidden").style.display = "block";
document.getElementById("des-hidden").style.display = "none";
}
});
Checking device in Back-End
Depending on your backEnd, if you have one (PHP, Node.Js) , you could check for the user-agent, and decide to display one video or the other
You can look at this if you use PHP :
Simplest way to detect a mobile device in PHP
Or if you use NodeJs :
Identify if the request is coming from mobile or not
More details
On recent browser, using the display:none CSS property will skip completely the file loading, meaning the video won't even get requested by the browser, saving both loading time and data usage
(See Does “display:none” prevent an image from loading?
Using a back-end solution could help to be sure the right video will receive the right video, preventing useless loading time, but it'll be harder for your page to adapt if the width of the page changes after the loading
So I recommend using the CSS option if you don't want to deal with Ajax or nodeJs asynchronsism
I tried searching on stack overflow and google but found no article that could help me. It shows a paused video even though i have used autoplay. Can anyone please help me ? I'm new to react.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import * as ReactBootstrap from 'react-bootstrap';
import coverimg from './hw.jpg';
import covervid from './hw.mp4';
import covervidtwo from './hw.ogv';
class Slider extends Component {
render() {
return (
<div className="">
<video loop autoplay>
<source src= { covervid } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src={ covervidtwo } type="video/ogg" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
);
}
}
export default Slider;
As noted in the comments by #Pavan kumar Dasireddy, you want to use the autoPlay attribute (notice the capital P).
<video loop autoPlay>
<source src= { covervid } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src={ covervidtwo } type="video/ogg" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
if you look in your console you will see:
Warning: Invalid DOM property `autoplay`. Did you mean `autoPlay`?
Just set a name for the autoplay attribute or use autoPlay. In addition, set the muted tag for the video. Chrome for instance block autoplay videos that have sound.
https://www.theverge.com/2018/3/22/17150870/google-chrome-autoplay-videos-sound-mute-update
<video loop autoplay='' muted>
...
</video>
Moreover, since the source tags are used by the browser to check compability and display the video properly, you can insert the error sentence "Your browser does not support video..." once after all the source tags. It'll be displayed only if the browser does not support all the source tags.
thanks that worked for me!!
this was my code
<video loop autoplay="" muted>
<source src="./videos/video.mp4" type="video/mp4" />
</video>
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me