Simple video tag with blob, m3u8 and iPhone autoplay

Michael

November 23, 2021 03:45

Hi, hope somebody can help me, Im trying to make a <video> background that autoplays even when the iPhone is in low battery, Ive seen some people do this using blob and m3u8, but I can't get it to work:

<video id="ForcePlay"width="500px"height="500px"mutedplaysinlineautoplay>

<source src="https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon,o_30,co_white,w_0.2,g_north_west/sp_sd/bb_bunny.m3u8"type="application/x-mpegURL">

</video>

 

<script type="text/javascript">

var video = document.getElementById('ForcePlay');

var url ='https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon,o_30,co_white,w_0.2,g_north_west/sp_sd/bb_bunny.m3u8';

var mediaSource =newMediaSource(url);

video.src = URL.createObjectURL(mediaSource);

</script>

0

• 

  Michael

  November 23, 2021 03:46

  Does any one know how to get this working?  thanks

  0
• 

  Michal Kuperman

  November 24, 2021 13:09

  Hi Michael,

  In order to use the autoplay in iOS devices, you need to make sure to include the playsinline attribute in the video element. 

  In addition, when the iOS device is in low power mode you need to add code to catch the suspend event. You can see an example here:   https://simplernerd.com/html-autoplay/

  Let us know if this solved your issue,

  Regards,

  0
• 

  Michael

  December 04, 2021 18:24

  Hi Michal, sorry for the late reply,

  yes of course I use autoplay and playsinline, but I haven't been able to go around the suspend, what I mean with .m3u8 / blob: is something like this link bellow, it works in Low power and no interaction necessary https://frontend-shallow-70b6326a-bcfa-4a9c-a1bb-6f58b5cb3fff.koji-apps.com/?uncache=1638498629&presentationStyle=fullscreen#koji-feed-key=profile

  <video loop="" playsinline="" class="sc-dlfnbm bAyFOX" src="blob:https://frontend-shallow-70b6326a-bcfa-4a9c-a1bb-6f58b5cb3fff.koji-apps.com/a8586118-3021-4524-b09e-0f589bb6e797"><source src="https://stream.mux.com/daGhRvRZ7YQqogPH8UI3HBmO01UwhM01pIkAzqn302wkMQ.m3u8" type="application/x-mpegURL"><source src="https://stream.mux.com/daGhRvRZ7YQqogPH8UI3HBmO01UwhM01pIkAzqn302wkMQ/low.mp4" type="video/mp4"></video>

  I wonder if this is possible with Cloudinary 

  Appreciate any help , thanks

   

  0
• 

  Michal Kuperman

  December 05, 2021 13:38

  Hi Michael,

  Yes, this can be done by using the Cloudinary Video player. You can read more about this here: https://cloudinary.com/blog/html5_video_tags_won_t_do_for_your_videos.

  Please let us know if you need any further assistance.

  Regards,
  Michal

  0

Post is closed for comments.