Expand my Community achievements bar.

SOLVED

mp4 not playing as expected on the qa link

Avatar

Level 2

Hi All,

 

I am trying run a target test which involves an mp4.
The code runs absolutely fine when checked on console but when the same code is pushed via target, the video doesn't get rendered and the source of the video appears on the top of the div.

 

Doesn't target support mp4 ?

Can someone pls help me with a solution to this ?

Thank you so much in advance!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You can wait here with on document loaded - there is certainly also more elegant way.

function yourFunction () {
  console.log("document loaded");
}

(document.readyState != 'complete') ? document.addEventListener('DOMContentLoaded', function() { yourFunction() }) : yourFunction();

You'll probably do something like this:

function addSourceToVideo(element, src, type) {
    var source = document.createElement('source');
    source.src=src;
    source.type = type;
    element.appendChild(source);
}

var video = document.createElement('video');
document.body.appendChild(video);  
addSourceToVideo(video, '<YOUR_VIDEO_URL>.mp4', 'video/mp4');  
video.play(); // Hope you do it differently - because that doesn't work nowadays, because e.g. Google doesn't allow this anymore because of autoplay - and you get an error towards something like this "..failed because the user didn't interact with the document first."

Hope this helps you a bit.

 

..and no, I don't have a blog yet. But you can follow me here.

 

View solution in original post

4 Replies

Avatar

Community Advisor

To me it just sounds like something is wrong with the timing. Especially if it works from the console - but not from target. Wait for document loaded or similar - and then execute your code.

Avatar

Level 2

HI Perrin

Can we execute a code on document load from Target ?
Do you have any blog which I can follow ?

 

Thank you

Avatar

Correct answer by
Community Advisor

You can wait here with on document loaded - there is certainly also more elegant way.

function yourFunction () {
  console.log("document loaded");
}

(document.readyState != 'complete') ? document.addEventListener('DOMContentLoaded', function() { yourFunction() }) : yourFunction();

You'll probably do something like this:

function addSourceToVideo(element, src, type) {
    var source = document.createElement('source');
    source.src=src;
    source.type = type;
    element.appendChild(source);
}

var video = document.createElement('video');
document.body.appendChild(video);  
addSourceToVideo(video, '<YOUR_VIDEO_URL>.mp4', 'video/mp4');  
video.play(); // Hope you do it differently - because that doesn't work nowadays, because e.g. Google doesn't allow this anymore because of autoplay - and you get an error towards something like this "..failed because the user didn't interact with the document first."

Hope this helps you a bit.

 

..and no, I don't have a blog yet. But you can follow me here.

 

Avatar

Level 2

Hi Perrin,


Thank you so much for the codes.

I did try them out!
Its the same - working on console but failing when pushed via target.

shravya20_1-1664453589174.png

This is what it looks on the target qa link.
Video doesnt get rendered and the URL appears on top.