Dynamically added videos using jquery not playing on mobile

Question

I am trying to display video preview when some one touch on that screen on touchstart event by dynamically add video tag and video source (which is .webm) video and will start to play automatically. I can fetch the video tag but video is not getting played. Here is my code:

<div class="thumb-overlay playthumb">
    <img src="http://img.domain.com/thumbs/2.jpg" title="" alt="" id="2" class="img-responsive ">
    <div class="duration">15:11</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
    $(".playthumb").on('touchstart', function(event) {
        var thumb = $(this).children('img')[0];
        var id = thumb.id;
        $('#thumbPlayerM').remove();
        var video = $('<video style="width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;" id="thumbPlayerM" class="img-fluid" loop=""></video>');
        var content = '<source type="video/webm" src="http://img.domain.com/webm/' + id + '/' + id + '.webm"></source>';
        $(video).append(content);
        $(video).hide();
        var target = $("#" + id);
        $(target).after($(video));
        $(video)[0].play();
        $(video).fadeIn();
    });
});
</script>

I even try this also

var vid = $("#thumbPlayerM");
vid.play();
$(video).fadeIn();

Video is coming over the image but not playing. Any one can help me? Thank you.

Is the line `var id = thumb.id;` returning the `id` properly? — Filnor, Oct 13 '17 at 08:02
There are limitations about video play and specially autoplay on mobiles, for data consuption reasons, [more details here](https://stackoverflow.com/questions/42160528/html5-autoplay-video-in-mobile-device#42161532) — Kaddath, Oct 13 '17 at 08:05

score 0 · Answer 1 · edited Oct 13 '17 at 10:41

0

I fixed this issue, need to add this:

<video autoplay loop muted playsinline></video>

My videos are already muted but I have no idea why it was not working. I must check my encoder.

edited Oct 13 '17 at 10:41

Cerbrus

70,800
18
132
147

answered Oct 13 '17 at 08:19

Apurba

11
4

Dynamically added videos using jquery not playing on mobile

1 Answers1