video autoplayed on iOS devices - javascript

I have used video tag with autoplay attribute. I know that autoplay works if the video is muted and in my case there is no mute but, if I click on play button for first time as a gesture to play it, then after closing the video and again loading back, it does not required user gesture to play, it gets autoplayed.
Once a user gesture is used to play the video then from second time video starts to autoplay as its own without any gesture. I have not found any policy regarding the second time autoplay on iphone devices without user gesture on play button.
Please help me to find the policy which describes a user gesture required for the first time to start autoplay from the second time on its own in iphone devices. Thank you.
<video src="a.mp4" id="video" frameborder="0" controls="" autoplay="" playsinline="" preload="auto"></video>

Related

Forward and Backward functionality not works for long video in Video tag of html 5

I am using Html video tag. I have added video URL from azure blob. When I click on play then it starts playing but when I want to make forward and backward to video, it is not going on that position where I want to start play. It is still on that current position. So I want to show loading when I click on forward when video is not ready to play same as YouTube. Here is my code:
<video id="video" class="family-post-img" controls="controls"
<source src="#Model.FileURL" type="video/mp4">
</video>
I want to show video buffering as YouTube when I directly click on forward and backward if video is not ready to play.
Thanks
When a user seeks through a video two events fire...
onseeking triggers while they are seeking
onseeked triggers when they are finished seeking.
Therefore, you need to monitor these events and take appropriate action, like this...
<video src="movie.mp4" type="video/mp4" onseeking="CallAction1();" onseeked="CallAction2();" controls></video>

How to be sure that autoplay script for HTML video on Chrome will work?

I want to make the video on HTML autoplays, given that Chrome prevents autoplay attr in HTML to play the video.
Here's my code :
<video id="video" width="400">
<source src="chess.mp4" type="video/mp4">
</video>
var vid = document.getElementById("video");
vid.autoplay = true;
vid.load();
The behavior is weird. First, I'm working on Eclipse and everything works perfectly fine on the eclipse browser.
When it comes to Chrome, the video sometimes works, sometimes need a clear-cache refresh to work... Not working with the first time opening the link. And now it's not working at all...
Any help?
You need to refer to Chrome Autoplay Policy Changes before you try any scripts.
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been
crossed, meaning the user has previously play video with sound.
On mobile, the user has [added the site to their home screen].
Top frames can delegate autoplay permission to their iframes to
allow autoplay with sound

Autoplay is not working in chrome browser on android device

I'm developing a web that needs to work on computers, smartphones, and iPhones.
I'm using the audio HTML tag with autoplay attribute and it doesn't work as expected i.e. audio does not play automatically
<audio id="audio3" autoplay>
What am I doing wrong here?
You have to add the muted and autoplay attributes together like below
<audio id="audio3" autoplay muted>
Chrome's autoplay policies changed in April 2018, and are as follows
Muted autoplay is always allowed
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On the desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound
Refer google docs for more information

Unmute autoplay video on mobile

I have a website that has a muted autoplay video in the background.
I have this:
var vidSource = document.getElementById('vidSource');
vidSource.setAttribute('src', 'images/background-mobile.webm');
window.addEventListener('touchstart', function() {
$('#backgroundVid').prop('muted', !$('#backgroundVid').prop('muted'));
});
<video id="backgroundVid" loop muted autoplay class="videoPlayer">
<source id="vidSource" type="video/webm" />
</video>
It works if I run the code in a click event with a desktop browser.
However, with Chrome for Android, the video freezes when the touch event is triggered.
I guess the same happens with Safari for iOS, aswell with many other mobile browsers.
I know videos need to be muted so that they can be autoplayed on mobile, but how can the user unmute them afterwards? (e.g.: by touching the screen or by clicking on an unmute button)

HTML5 video tag in IE plays 2 tracks simultaneously instead of one

I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want

Categories