html5 video autoplay doesn't work on iPhone - javascript

<video autobuffer controls autoplay>
<source id="mp4" src="../vid/coolvideo.mp4" type="video/mp4">
</video>
Is there anyway to autoplay a .mp4 video file on page load for iPhone and Android Smart Mobile Devices. The above works great in the browser, but struggles hard on smart mobile. Is there any other HTML5 or even If I must JS solutions for iPhone (without loading a bloated third-party resource, ideally). Plain javaScript or plain jQuery, HTML5 solutions ideal.

It works only if you add muted and playsinline attributes
<video autoplay playsinline muted loop>
<source src="cover.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

Check this link
which says:"autoplay is disabled to prevent unsolicited cellular download"

Related

auto play video element in html reactJs

I tried this code to implement the autoplay video feature without the control bars but the issue that I faced was, the video was not autoplaying after refreshing the page. this project is in react. even after adding an autoplay attribute, the video is not autoplaying. what's the mistake am I doing?
I expect it to be autoplaying even after refreshing the page
I tried this code to implement the autoplay video feature without the control bars but the issue that I faced was, the video was not autoplaying after refreshing the page. this project is in react. even after adding an autoplay attribute, the video is not autoplaying. whats the mistake am I doing?
<video id="coinSaverIcon" autoPlay playsInline>
<source src={coinsaverIcon} type="video/webm" />
</video>
You can add muted property
<video id="coinSaverIcon" autoPlay playsInline muted>
<source src={coinsaverIcon} type="video/webm" />
</video>
In some browsers autoplay (Chromium for example) is not allowed anymore.
Furthermore you shouldn't implement this kind of features for accessiblity issues.
https://www.w3schools.com/tags/att_video_autoplay.asp
https://www.a11yproject.com/posts/never-use-auto-play/

LinkedIn HTML audio autoplay

I have simple audio in my app I want to add audio to play automatically when the user open in my site via LinkedIn browser
Here is my html
<audio onloadeddata="this.play()" id="audioplayer" playsinline="true" webkit-playsinline controls loop autoplay muted>
<source src="audio/muzyka_meed_loop.mp3" type="audio/mpeg"> Your browser does not support the audio element.
</audio>
Unfortunately, this is not working
What do I need to change to get this working?
You have do it like below. Add "autoplay" to audio tag.
<audio autoplay id="audioplayer" controls>
<source src="audio/muzyka_meed_loop.mp3" type="audio/mpeg">Your browser does not support the audio element.
</audio>
Note: The audio tag is not supported in Internet Explorer 8 and earlier versions.

Autoplay Video in Chrome with Data-Saver enabled

I would like to autoplay a small video on chrome with data saver enabled. When the data saver is enabled chrome is blocking all html5 autoplay and play initiation via. script.
<video autoplay muted controls>
<source src="file.mp4">
</video>
Nevertheless there are some html5 players which still work. So it is possible and the question is how.
For example https://www.cb-1100.de/forum/viewtopic.php?f=27&t=1144 (below the first post)

How can I redirect to a URL when browser dose not support HTML5 videos?

I am trying to redirect to a different URL when html5 video's not supporting. Actually HTML5 video are not playing in safari browser. So I want to redirect my page to home.html instead of index.html. Any help or direction My browser giving message Your browser does not support HTML5 video. Here is my code, any help will be appreciated.
index.html
<video id="myVideo" autoplay preload controls >
<source src="final.mp4" type="video/mp4">
<source src="final.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="final.webm" type="video/webm; codecs=vp8, vorbis">
Your browser does not support HTML5 video.
</video>
You can check if the video element is supported in JavaScript, and then redirect if it isn't supported:
if (!document.createElement('video').canPlayType) {
window.location.replace('home.html');
}

HTML5 Video not rendering on Safari & Firefox with Angular.js

Im trying to display some static HTML5 video in my Angular app. It plays without issues in Chrome but not on Safari or Firefox.
<video class="masthead-video w100 m-w100" autoplay loop muted>
<source src="public/img/test.mp4" type="video/mp4">
<source src="public/img/test.webm" type="video/webm">
<source src="public/img/test.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Loading this markup into a browser as simple HTML (no angular or any other markup) allows it to play on Safari and Firefox normally without issues.
Ive tried using ng-src instead (even though I shouldnt have to since Im not using dynamic paths) but it didnt help.
Does anyone know of any issues when using HTML5 video with Angular.js?
Use $sce for trust source url .
$scope.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
};
$scope.src= public/img/test.mp4;
Html Content
<video class="masthead-video w100 m-w100" autoplay loop muted>
<source ng-src="{{trustSrc(src)}}" type="video/mp4">
Your browser does not support the video tag.
</video>
appy this way for your code.

Categories

Resources