I want to make the video autoplay without any user gesture in reactjs. I know as per recent google and apple web video policy we cannot autoplay a video having audio without user gesture.But i have seen few websites which still autoplays the video across modern web browsers also.
I came across many questions related to this issue on stackoverflow but none helped me.
Here is what i have tried.
Try 1.
<video id="miniVideo" preLoad="yes" autoPlay="autoplay" loop width="100%" height="auto" playsInline>
<source src="/mini/video/cooper.mp4" type="video/mp4" />
<source src="/mini/video/cooper.webm" type="video/webm" />
</video>
Try 2.
<iframe playsInline id="miniVideo" src="/mini/video/cooper.mp4" width="100%"
height="400px"
allow="autoplay; fullscreen"></iframe>
Try 3.
Script:
componentDidMount(){
var videoTimer = document.getElementById("miniVideo");
videoTimer.play();
}
HTML:
<video id="miniVideo" width="100%" height="100%">
<source src="/video/cooper.mp4" type="video/mp4" />
<p>This browser does not support the video element.</p>
</video>
Your help will be well appreciated.Thanks
I am not sure about Safari but Chrome has changed the autoplay policy. Look here:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
In order to autoplay, add muted attributed to video tag.
For example:
import React, { Component } from 'react';
class Player extends Component {
constructor(props) {
super(props);
this.state = {
isVideoMuted: true
};
}
handleMuteState = () => {
this.setState(prevState => ({
isVideoMuted: !prevState.isVideoMuted
}));
}
render() {
return (
<div>
<video muted={this.state.isVideoMuted} src="./video.mp4" />
<button onClick={this.handleMuteState}>{this.state.isVideoMuted ? 'Unmute' : 'Mute'}</button >
</div>
);
}
}
export default Player;
Related
I'm trying get the video in my post's body being autoplayed when the post is opened.
This is what it currerntly looks like:
<video class="wp-video-shortcode" id="video-611-1_html5" width="1080" height="1920" preload="metadata" src="https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4?_=1" style="width: 500px; height: 888.889px;"><source type="video/mp4" src="https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4?_=1">https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4</video>
I tried adding the autoplay using the following:
<script>
(function($) {
$(document).ready(function() {
$(".wp-video-shortcode").prop('loop', 'loop');
$(".wp-video-shortcode").prop('muted', true);
$('.wp-video-shortcode').prop('autoplay', true);
});
})(jQuery);
</script>
But it doesnt do anything. What am I doing wrong?
here's a post example where the video should autoplay.
https://jetminister.epic-cars.be/richard-branson/
Thank you
Thank
You need these attributes to get mute autoplay video : onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop
<video width="320" height="240" onloadedmetadata="this.muted = true" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Read this:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Autoplay only works if you use the mute attrib.
How I can bind the playbackRate of a html5 video element? Is this possible direct with vuejs without getElementById?
//Example of plain javascript
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;
If you want to bind it to a variable so that when the variable changes, the rate changes, you can make a trivial directive.
new Vue({
el: 'main',
data: {
rate: 1
},
directives: {
playbackRate(el, binding) {
el.playbackRate = binding.value;
}
}
});
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<main>
<video id="videoElement" controls poster="velocity-thumbnail.jpg" v-playback-rate="rate">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.webm" type="video/webm" media="all and (max-width:680px)">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4" type="video/mp4">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.webm" type="video/webm">
<p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
</video>
<div class="controls">
<label>playbackRate: <input type="range" step="0.1" min="0.5" max="2" value="1" v-model="rate"></label> <span aria-live="polite">{{rate}}</span>
</div>
</main>
According to MDN (https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained), there is an event, ratechange, that is fired when the rate changes. So if you use v-on:ratechange="soandso", you can listen for that event. I created a codepen that demonstrates this. It uses a button to slow down the rate to 0.1. First, the HTML:
<div id="app">
<button #click="test">test</button>
<video width="280" controls v-on:ratechange="vidRate" ref="vid">
<source src="https://www.apacara.com/media/video/myVideo.webm" type="video/webm" />
<source src="https://www.apacara.com/media/video/myVideo.mp4" type="video/mp4" />
<source src="https://www.apacara.com/media/video/myVideo.ogv" type="video/ogg" />
Your browser doesn't support HTML5 video tag.
</video>
</div>
And then the JS (I wrote this very quickly):
const app = new Vue({
el:'#app',
methods:{
test() {
this.$refs.vid.playbackRate = 0.1;
},
vidRate() {
console.log('called');
}
}
})
All I'm doing in using a quick console.log, but you could update a value in the data() block.
CodePen: https://codepen.io/cfjedimaster/pen/RxdqvG
I have been searching for a long time and have tried a lot of approaches but nothing seems to be working. I have a video tag which I want to be played when I tap over it. I am working on Ionic 3 and angular. The code is shown below. Please help me out or direct me if I missed anything.
HTML:
<video id="edit-video-element"
width="100%"
[src]="videoPath"
webkit-playsinline
poster="{{thumbnailPath}}" controls autobuffer >
</video>
.ts file
this.video = document.getElementsByTagName('video')[0];
onVideoClick(e) {
(this.video.paused) ? this.video.play() : this.video.pause();
}
Its not displaying any issues, but not working at all.
Update:
<video *ngIf="hasVideo" width="100%" controls autoplay>
<source [src]="videoPath" type="video/mp4">
</video>
I added this and then in the .ts file I have the videoPath as:
file:///private/var/mobile/Containers/Data/Application/99091302-995E-40C7-AF66-0E07BCF09220/tmp/trim.E4AE7B29-06BB-4077-A56A-B546A53267DC.MOV
Update:
I was able to make it work for the files from photo album
I had to install "DomSanitizer" and then add _DomSanitizationService.bypassSecurityTrustUrl(yourFilePath) in my video tag.
Try this out. It's working fine for me.
Html
<video #videoPlayer class="video-player" controls></video>
TS
#ViewChild('videoPlayer') mVideoPlayer: any;
ionViewDidLoad() {
let video = this.mVideoPlayer.nativeElement;
video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
video.play();
}
sass
.video-player {
width: 100%;
height: 100%;
}
I have a react application where i am using html5 video tag to show a cover video. It works on ipad, android and all the major browsers but on iphone it just shows a glimpse of a play button which if clicked shows a full page video.
class FrontPage extends React.Component{
constructor(props) {
super(props);
this.authorize = [''];
}
render() {
return (
<div>
<video controls="true" style={BGstyle} preload="yes" autoPlay muted loop width="100%" height="auto">
<source src="/images/film.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<Ladder/>
<SignUp/>
</div>
);
}
}
var BGstyle = {
position: "absolute",
zIndex:999,
right:0,
bottom:0,
minWidth:'100%',
width: 'auto',
backgroundSize:"cover"
}
export default FrontPage;
you can see it on www.viogto.dk
For iOS 10+
Try the playsinline attribute.
But in camel case for react :
<video playsInline>
Source - New video Policies for iOS
In iOS 8 and iOS 9
Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.
Source - https://stackoverflow.com/a/36348909/3337722
I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely before trying to play to prevent it from stuttering as much. Here is my current code:
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/backgroundvideo.mp4" type="video/mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
</video>
Any help is greatly appreciated!!
This is a working solution for me. You should use canplay as a best practice to be sure the browser can play the video. Also, here is a straight javascript solution.
Note: I removed autoplay, an extra closing video tag, and formatted your muted & loop flags.
var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" muted loop>
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-computer-hacking-in-process-cyber-security-concept_h-l3zbu4xb__PM.mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
That would be better to remove autoplay attribute from video tag and add it when you actually need it (meaning in 5 seconds). And if you are willing to preload video, then you should use preload="auto" (not preload="true"), it will load completely while loading a page.
const startVideo = async () => {
const video = document.querySelector('#video_background');
try {
await video.play();
video.setAttribute('autoplay', true);
console.log('video started playing successfully');
} catch (err) {
console.log(err, 'video play error');
// do stuff in case your video is unavailable to play/autoplay
}
}
setTimeout(startVideo, 5000)