[FIXED] Issue With Video Tag in Playcanvas

Help & Support
1

Hi fellows,
I’m having an odd issue with the video player I have integrated in playcanvas using js to create video tag:

following is my js code:

var Element;
    Element= document.createElement('div');
    Element.style.opacity=0.0;
    Element.classList.add('container');
    document.body.appendChild(Element);

    var Video;
    Video = document.createElement('video');
    Video.setAttribute('id', 'VideoTag'); // assign an id
    Video.setAttribute('poster', SelectedPoster); // assign a poster
    Video.src = SelectedURL; //the url to stream
    Video.seeking=true;
    Video.crossOrigin = 'anonymous';
    Video.preload = true;
    Video.load();
    Video.controls = true;
    Element.appendChild(Video);

The css im using is:

.container {
    position: absolute;
    min-width: 60%;
    max-height: auto; 
    width: auto;
    height: auto;

    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#VideoTag{
    width: 100%;
    height: auto;
}

Issue:
when video plays, I touch the inside and outside the video frequently, sometimes the background UI turn black. I have confirmed the buttons are there but are not visible.But don’t know why this is happening.
Background UI are textures for now but I have also tried sprites but same issue was seen.

Can you please help me out for the following issue (only occuring on andriod so far) (video of the issue):

https://drive.google.com/file/d/16y23dnXMV1iWDhixTOm-yaCduW-BUYas/view?usp=sharing

Thanks in advance.

2

Mind sending a link to the project as well?

3

sorry can’t do that, project is private

Anything I can send over for help other than project?

4

Ok ill take a look at it :100: but while im doing this try looking at this project:
https://playcanv.as/p/IitiVNN3/ //Hmm seems not to be playing the video anymore @yaustar
or more commonly this post should maybe help a bit :slight_smile:
Internet Explorer 11 doesn't play video

5

Without knowing what else you do in the app, it’s basically impossible to debug. If you can share a build of the app, that might help.

6

this is the build:
https://geniteam.com/Internal%20Testing/index.html

fourth screen is of video , kindly play it on any android device and play around like I have done in the video:

https://drive.google.com/file/d/16y23dnXMV1iWDhixTOm-yaCduW-BUYas/view?usp=sharing

you will see the issue.

7

thanks for the reply but my requirements are to play video with playing controls like in tag not rendering textures for video

8

oh so you want to add a normal html video into your build?

9

I can’t reproduce the bug on my Samsung S7 on Brave. Chromium version 73.0.3683.90

What browser and device are you using? Could it be a feature of your browser/device to darken around the video?

10

I have finally fixed the issue , it was occurring on some devices with only chrome, disabling “prefer webgl 2.0” and changing “rendering order of UI” from settings have fixed the possible issue on some devices.
Thanks for all the help.

1 Like