{"id":1859,"date":"2025-05-28T10:00:04","date_gmt":"2025-05-28T10:00:04","guid":{"rendered":"https:\/\/howiem.org\/wordpress\/?p=1859"},"modified":"2025-05-28T10:00:04","modified_gmt":"2025-05-28T10:00:04","slug":"playing-back-looped-videos-on-a-webpage-with-no-glitch-or-pause","status":"publish","type":"post","link":"https:\/\/howiem.org\/wordpress\/2025\/05\/28\/playing-back-looped-videos-on-a-webpage-with-no-glitch-or-pause\/","title":{"rendered":"Playing back looped videos on a webpage with no glitch or pause"},"content":{"rendered":"<p>I use looped videos in webpages not just as part of content, but as part of the design\/branding chrome: done carefully, they can add subtle polish and visual interest, and if carefully encoded they can be extremely efficient bandwidth-wise. Only trouble is, if you just drop a video into a webpage, looped, you&#8217;re likely to get a glitch or brief pause at the loop point.<\/p>\n<p>Managed (eventually) to track down what was causing it: if your video file contains an audio stream, even if it&#8217;s silent &#8212; and even if the player component is set to mute &#8212; browsers struggle with the loop point, presumably because they&#8217;re forcing the video to stop and restart completely each time it loops to make sure audio\/video sync is correct.<\/p>\n<p>So the answer is to remove the audio stream completely from the file. This is quick to do with ffmpeg, and doesn&#8217;t affect the encoding of the video stream, so it won&#8217;t affect video quality:<\/p>\n<pre>ffmpeg -i input_file.mp4 -c copy -an output_file.mp4<\/pre>\n<p>The &#8220;-c copy&#8221; means &#8220;copy the media streams without re-encoding&#8221;, and the &#8220;-an&#8221; means &#8220;omit any audio streams&#8221;.<\/p>\n<p>Test: <\/p>\n<p><video autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"1080\" height=\"540\"><source src=\"\/wordpress\/wp-content\/uploads\/2025\/05\/beautifica_B_1_na.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>(the original glitchy version &#8211; same video but with silent audio stream &#8211; is <a href=\"https:\/\/howiem.org\/wordpress\/2023\/02\/10\/quick-browser-test-60fps-vs-30fps-video\">here<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I use looped videos in webpages not just as part of content, but as part of the design\/branding chrome: done carefully, they can add subtle polish and visual interest, and&#8230;<\/p>\n","protected":false},"author":2,"featured_media":1864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-1859","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-uncategorized"},"_links":{"self":[{"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/posts\/1859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/comments?post=1859"}],"version-history":[{"count":4,"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/posts\/1859\/revisions"}],"predecessor-version":[{"id":1863,"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/posts\/1859\/revisions\/1863"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/media\/1864"}],"wp:attachment":[{"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/media?parent=1859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/categories?post=1859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howiem.org\/wordpress\/wp-json\/wp\/v2\/tags?post=1859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}