Video Loop Error - Not Seamless

Dan

August 07, 2019 22:13

I have a Cloudinary hosted video on my website's home page that autoplays and loops. However, the loop isn't seamless. It pauses a moment on the first frame every time. Is this simply a matter of the video being too large (~28mb), having to reload each loop, or is there a possible solution that doesn't require reducing the files sizes?

Here's the code I'm using:

<video width="100%" height="100%" autoplay loop muted playsinline >
<source src="Video Link">
</video>

 

Any help would be greatly appreciated. Thanks.

0

• 

  Aditi Madan

  August 08, 2019 22:17

  Hi Dan,

  Can you please open a support ticket here: https://support.cloudinary.com/hc/en-us/requests/new and share the final URL of the video and I will be able to dig in deeper.

  Thanks,
  Aditi

  0
• 

  Dan

  August 08, 2019 22:56

  Hey Aditi,

   

  Thanks for the response. From what I’ve gathered, it may be a larger html issue. I’ll open the ticket, and let me know what you think.

   

  Final URL: https://res.cloudinary.com/hambonetone/video/upload/v1565218848/Salient_HeroVideo_080719_v3_lriadj.mp4

  Thanks

  0
• 

  Aleksandar Kostadinov

  August 09, 2019 18:24 Edited

  Hi Dan,

  Thanks for creating the support ticket, I replied there in details just now.

  However, I wanted to share the findings in here too in case other users run into the same issue.

  In short, from my testing and looking online at similar reported issues, this seems related to how the 'loop' control is implemented within each browser's HTML5 video player. Just a few of the reported issues on StackOverflow I've read through:

  • https://stackoverflow.com/questions/37444784/html5-video-stutter-on-loop
  • https://stackoverflow.com/questions/34097834/html5-video-how-to-do-a-seamless-play-and-or-loop-of-several-videos
  • https://stackoverflow.com/questions/17930964/video-element-with-looping-does-not-loop-videos-seamlessly-in-chrome-or-firefo

  I've created two JSFiddles below:

  1. https://jsfiddle.net/4rf83tas/ - Uses the video tag that is shared from this post

  2. https://jsfiddle.net/wqzx4skj/ - Loading the same video using the Cloudinary Video Player with the same 'loop' control

  Trying out those two implementations on different browsers showed improvement in the loop control transition when using the Cloudinary video player. It also seems related to the browser itself and the best performance was on Chrome.

  Best regards,

  Aleksandar

  0

Post is closed for comments.