Bugs with starting video playback without sound and pausing the video when scrolling

[kirillstar1]

Hi. I found a couple of bugs that make it a little difficult to work.

First: when using html video, you cannot run it without sound. I tried specifying parameters inside the div tag, and also passing them during the function call. I can still control the volume using the suggested functions mute() and setVolume(), but it would be more convenient to run the background video without sound by default. Because of this bug, an error appears when the browser does not allow the automatic launch of a video with the sound turned on.

Second: if you pause the video, and then scroll the page and return to the video, it automatically continues playing, although the indicator shows that it is paused. After this, to pause playback again, you need to press the button to “unpause”, and then press again to pause.

Both of these errors are also present on the demo page of the project.

[stamat]

Hey @kirillstar1 thanks for reaching out! Happy New Year! ✨

1. I'm not sure whar you are refering to? Can you share with me the example HTML you are having an issue with? The videos are muted by default, and yes they are not autoplaying if they are not muted.
2. I've fixed this issue hopefully, it was one of my classical oversights! Nice catching that one!

Sorry for the late reply! Cheers!

[kirillstar1]

You may see this error on your demo site if you scroll down to "HTML5 Video" and then refresh the page. In this case, the video will not start and an error will also appear in the console

[stamat]

@kirillstar1 sorry to bug you bud, but can you add a screenshot of the error here? 🙏 I can't seem to recreate it. Also what browser are you using? What version? Thanks!

[kirillstar1]

Here you can see the video: https://youtu.be/JDV2LS7FL9g
As I wrote earlier, when the page is reloaded, the video does not start, but an error is registered. If you start the video manually, it turns on with sound, although by default it should be muted. The browser is Chrome v.120.0.6099.225 if I am not mistaken

UPD: While I was writing this text, a browser update arrived, after which I checked this bug again and it turned out that part of it was fixed) Now the video starts, but still with sound: https://youtu.be/V5CYrYCY4uM
Now browser version is 121.0.6167.86.

[stamat]

@kirillstar1 wow! Thanks for the screen capture! 🙏 I'll take a look at it in detail when I have a moment! We'll get to the bottom of this!
Ah it's a Chrome only issue, you didn't have to go through all of the trouble to record - you could just have told me your browser. But thanks anyway! I'm recreating the issue on Chrome and Firefox! This is super weird cause this works how it should on Safari and Safari is the one that always works differently.

The attributes are all there, probably we need to explicitly tell them muted="true". Though this is not how these attributes work by specification - they should work like a hidden attribute, without a vaule.

To disable video autoplay, autoplay="false" will not work; the video will autoplay if the attribute is there in the

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#autoplay

I'll let you know when I have the update!

P.S. the mute "warning" you are seeing is for youtube or vimeo, it just says it doesn't recognize the attribute.

[stamat]

@kirillstar1 I think I've fixed it! So here is my interpretation of the issue:

• I manually create document.createElement('video') video element object and then add the attributes for "mute" and "autoplay"
• This works on Safari, but on Chrome and FF the attributes are completely ignored
• It seems that these attributes are registered on the element creation and not on the element render on the page and since we manually create it adding attributes to it doesn't have any effects even though we didn't append it to the dom when it gets rendered to the page.
• The soulution was either to parse the whole HTML with the player and it's attributes, or to just manually set these states to the video element object. And I did the latter.

So I think that it will work now. I'll publish the new release in a bit and let you know!

Thanks for your help @kirillstar1 I wouldn't have detected this without you - since I only use Safari 😆

[stamat]

@kirillstar1 version 1.1.4 is published! Do let me know if it fixes the issue!

[kirillstar1]

Yep, I think it works great! Thanks for fixing the issue and answering. Have a good day!

[stamat]

My pleasure! Thanks for helping me out!