{"id":82,"date":"2014-06-08T09:10:31","date_gmt":"2014-06-08T09:10:31","guid":{"rendered":"http:\/\/html5box.com\/blog\/?p=82"},"modified":"2014-06-08T09:15:59","modified_gmt":"2014-06-08T09:15:59","slug":"how-to-loop-one-video-in-html5-gallery","status":"publish","type":"post","link":"https:\/\/html5box.com\/blog\/jquery-video-gallery\/how-to-loop-one-video-in-html5-gallery\/","title":{"rendered":"How to loop one video in HTML5 Gallery?"},"content":{"rendered":"<p><strong>Question<\/strong>:<\/p>\n<div>I may be clutching at straws but thought I'd ask: would you know of a way that each video (mp4 and webm) can individually be configured \/ encoded \/ saved to automatically loop each time it plays -- independent of any html or xml code?<\/div>\n<div><\/div>\n<p><strong>Answer<\/strong>:<br \/>\nThis can not be done by encoding a video.<br \/>\nWith HTML5 Gallery, you can do the following:<\/p>\n<div><\/div>\n<div><\/div>\n<div>1. Add the following JavaScript code in your webpage head section, before the &lt;\/head&gt; tag:<\/div>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\/\/ &lt;!&#x5B;CDATA&#x5B;\r\nfunction onVideoEnd(data) {\r\nvar id = data&#x5B;0];\r\nhtml5GalleryObjects.objects&#x5B;0].isPaused = true;\r\nhtml5GalleryObjects.objects&#x5B;0].slideRun(id, false, true);\r\n}\r\n\/\/ ]]&gt;&lt;\/script&gt;\r\n<\/pre>\n<div>2. In your gallery div, add the following data tag:<\/div>\n<div>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\ndata-onvideoend=&quot;onVideoEnd&quot;\r\n<\/pre>\n<p>The video will loop playing the current video once it starts playing.\u00a0This only works on desktop, will not work on mobile.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Question: I may be clutching at straws but thought I'd ask: would you know of a way that each video (mp4 and webm) can individually be configured \/ encoded \/ saved to automatically loop each time it plays -- independent of any html or xml code? Answer: This can not be done by encoding a &hellip; <a href=\"https:\/\/html5box.com\/blog\/jquery-video-gallery\/how-to-loop-one-video-in-html5-gallery\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">How to loop one video in HTML5 Gallery?<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","hentry","category-jquery-video-gallery"],"_links":{"self":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":9,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":92,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions\/92"}],"wp:attachment":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}