-1

First of all on computer browsers everythings is ok I have the following problem only on mobile!!

I have html video like this: 

 <video id="myVid" poster="poster.png" muted autoplay loop>
        <source src="vid.webm" type='video/webm'>
        <source src="vid.mp4" type='video/mp4'>
 </video>

It's not autoplayed on mobile so i have to force play it using javascript: I used

$('#myVid').click(function () {
    $('#myVid').get(0).play();
});

It's working but it does not working on $(document).ready() like: 

 $(document).ready(function () {
     $('#myVid').get(0).play();
 });
Rino Raj
  • 6,264
  • 2
  • 27
  • 42
Ala Aga
  • 399
  • 2
  • 4
  • 12
  • 2
    This is _intended_ behaviour to prevent you from autoplaying videos and using mobile data without permission. The user needs to interacts with a video first and there is no way around this (as well as you shouldn't even try to get around it). Heres some documentation from Apple, and other mobile OS-es have followed suit: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1 – somethinghere Mar 14 '16 at 11:56

1 Answers1

0

Autoplay does not work on all versions of iOS and modern versions of Android. It's done to prevent possible bandwidth overuse.

Technically, it should be possible, however I didn't test it.

Try changing the part of the code that you already have slightly:

$('body').on('click', '#myVid', (function () {
    $(this).get(0).play();
});

Then trigger click on this element with some delay, when the page finished loading:

$(document).ready(function () {
    setTimeout(function () {
        $('#myVid').trigger('click')
    }, 100);
});
Ilia Ross
  • 13,086
  • 11
  • 53
  • 88
  • I know this could solve the problem, but it's morally a totally different issue. There's a reason _why_ this is implemented as such. However, I am pretty sure that this shouldn't work either as the 'trigger' is done by the code and not by the user. However, adding a `touchstart` on the document itself and triggering it with that interaction would work (as per this solution: http://stackoverflow.com/questions/9075520/how-to-autoplay-html5-mp4-video-on-android#answer-24917996) – somethinghere Mar 14 '16 at 12:05
  • I agree on the moral part of the issue, however the questioner doesn't consider this apparently. – Ilia Ross Mar 14 '16 at 12:07
  • 1
    I know, but - and this is just personally - I decided not to try to suggest a workaround hack (decent googling will bring them up anyhow) and explain the good, solid reasoning behind this. Don't worry, I won't downvote as the answer is - probably, as I haven't tested it - correct. – somethinghere Mar 14 '16 at 12:09
  • It did't work, as what @somethinghere mentioned that it requires user interation to play. And there is no way to do that. – Ala Aga Mar 14 '16 at 12:26
  • Are you saying that it's not possible to imitate `touch` event? Even though, I don't know as didn't check but I bet it's possible to `autoplay` the video by using `MediaElement.js` or other HTML5 player. – Ilia Ross Mar 15 '16 at 07:22