{"id":448,"date":"2018-06-07T08:29:12","date_gmt":"2018-06-07T08:29:12","guid":{"rendered":"http:\/\/info.juliusgoh.life\/?p=448"},"modified":"2018-06-07T08:29:40","modified_gmt":"2018-06-07T08:29:40","slug":"video-autoplay-when-visible","status":"publish","type":"post","link":"https:\/\/info.juliusgoh.life\/?p=448","title":{"rendered":"Video Autoplay ( when visible)"},"content":{"rendered":"<p><a href='https:\/\/cdnjs.com\/libraries\/vissense\/tutorials\/getting-started'>https:\/\/cdnjs.com\/libraries\/vissense\/tutorials\/getting-started<\/p>\n<p><\/a><\/p>\n<p>My Example of making all video using vissense function<\/p>\n<pre>\r\n    $(\".video\").each(function () {\r\n        var myVideo = document.getElementById(this.id);\r\n\r\n        VisSense.VisMon.Builder(VisSense(myVideo, { fullyvisible: 0.75 }))\r\n        .on('fullyvisible', function(monitor) {\r\n          myVideo.play();\r\n        })\r\n        .on('hidden', function(monitor) {\r\n          myVideo.pause();\r\n        }).build().start();\r\n    });\r\n\r\n<\/pre>\n<p>Code Explanation<br \/>\n1. For each class video, get their id and set VisSense function to it<br \/>\n2. Set the fullyvisible to desire visibility for my case i set it to 75% to autoplay videos<\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/cdnjs.com\/libraries\/vissense\/tutorials\/getting-started My Example of making all video using vissense function $(&#8220;.video&#8221;).each(function () { var myVideo = document.getElementById(this.id); VisSense.VisMon.Builder(VisSense(myVideo, { fullyvisible: 0.75 })) .on(&#8216;fullyvisible&#8217;, function(monitor) { myVideo.play(); }) .on(&#8216;hidden&#8217;, function(monitor) { myVideo.pause(); }).build().start(); }); Code Explanation 1. For each class video, get their id and set VisSense function to it 2. Set the fullyvisible to desire [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":449,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"image","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/posts\/448"}],"collection":[{"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=448"}],"version-history":[{"count":2,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/posts\/448\/revisions"}],"predecessor-version":[{"id":451,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/posts\/448\/revisions\/451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=\/wp\/v2\/media\/449"}],"wp:attachment":[{"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/info.juliusgoh.life\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}