1

more or less a complete noob here, so apologies in advance if this question is completely ridiculous!

Effectively I'm building a one page site (artistic purposes) - contained on this site is a video-bg set to autoplay. The autoplay function works fine across all browsers (minus IE) and all devices I've tested thus far.

There's just one issue...

For reasons inexplicable to this noob, autoplay only works when the browsers inbuilt zoom is set to 75% or below. Just to double check this, I trialled embedding the video with 'controls'. Still, the outcome was the same, the video autoplays when the browser zoom is set to 75% or less and it would only play above 75% when prompted ('play' control was clicked) by the user/viewer.

For reasons I can't figure out, autoplay (in my case) is being effected by browser zoom??

I'm working in Muse... Most likely a faux pas??

HTML: 

<div class="video-container">
<video autoplay muted loop id="video-bg">
<source src="assets/maskon.mp4" type="video/mp4">
Your browser does not support HTML5 video. Please update to view video content :) 
</video>
</div>

CSS:

<style>
#video-bg {
position: relative;
min-width: 100%;
height: 100vh;
}
.video-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
}
</style>

Further apologies for using wrong code insertion function... Code Sample was previewing with about half of code missing??

divisive
  • 11
  • 2
  • This is most probably related to one of your plugins. Check what is hooking the `resize` event, since it seems it's from there this happens, and not only zoom change. According to chrome://media-internals/ it does receive a normal pause event. Not sure if it is a direct call to HTMLMediaElement.pause() though... So try disabling all running code one by one until you find which causes this behavior. (note that on a [js free](https://jsfiddle.net/x1ws5g11/1/) page, this doesn't happen) – Kaiido Jan 05 '18 at 05:59
  • Thanks @Kaiido :) This is my first code so I'm really out of my depth. If I'm understanding you correctly, you're saying that autoplay/zoom issue is most likely a result of Muses js resize function? In regards to the, HTMLMediaElement.pause(), that didn't come from me (natively embedded?) On the code note: I went through and removed each line/section and tested/retested however, still receiving the same end result. This [link](https://jsfiddle.net/x1ws5g11/1/) has got me excited however, I'm such a noob I really don't know what to do there. Sorry for everything I've probably misinterpreted! – divisive Jan 05 '18 at 06:55
  • @Kaiido Probably the complete wrong direction - but going off how I understood your comment I tried inserting this line after the `object.onresize = function(){document.getElementById("video-bg").play()};` Still no result... – divisive Jan 05 '18 at 07:07
  • listening yourself to onresize would be an ugly workaround. Better find the root cause and fix it at the source. If you really want to go this route though, that would more look like `window.onresize = function() { requestAnimationFrame(function() { document.getElementById("video-bg").play();})};` in order to be sure the pausing script got called before your own play call. But remember, this is ugly, and should really be your last resort. – Kaiido Jan 05 '18 at 07:30
  • @Kaiido Thank you :) I agree, it is ugly and also a little buggy. However, as a short term solution, this works well enough! I'll research more and do my best to fix at source over the coming days. Thanks again! – divisive Jan 05 '18 at 07:54

2 Answers2

0

Your code works in Firefox correctly !

This is probabely one of WebKit's bugs of html5 video

you should use .play() function of javascript to autoplay !

as links below :

Video auto play is not working in Safari and Chrome desktop browser

add this code just after the </video>

<script>
    document.getElementById('vid').play();
</script>
Amir Mohammad Moradi
  • 851
  • 1
  • 6
  • 14
  • Thanks for your reply! I had tried the above script previously, with no result, I've put it in again and I'm still getting the same result... No autoplay above 75% zoom. It's interesting that you say autoplay isn't working in Chrome, it's working in mine just has to be set at 80% zoom or below *tested in Chrome on 3 different PCs – divisive Jan 05 '18 at 05:22
  • I missed the tag before... @amirmohammad moradi – divisive Jan 05 '18 at 06:56
  • @divisive your code is not working for me in chrome but in firefox is OK!!! – Amir Mohammad Moradi Jan 05 '18 at 12:54
  • @divisive you need to play video on DOM load or change ! see this : https://codepen.io/desandro/pen/RNBxXq – Amir Mohammad Moradi Jan 05 '18 at 13:01
0

UPDATED - TEMPORARY SOLUTION

Thanks to @kaiido I found a temporary solution to this problem.

Inserting the code: window.onresize = function() { requestAnimationFrame(function() { document.getElementById("video-bg").play();})}; after </video> has allowed for functional autoplay capabilites at all zoom resolutions.

Still a bit buggy (page needs to be reloaded every so often) when zooming up/down however, a good for workaround for now :-)

divisive
  • 11
  • 2