Possible to replace a video with another video using Javascript?

I’m trying to see if I can call different videos using JS into the same element each time. Is this possible, or is there a better solution involving timelines? (I’m fairly new to Hype.)

Thanks! :slight_smile:

Hi @peachboy,

assuming you’ve an existing videoelement with id ‘yourVideo’ it would be sthg. along those lines (not tested!):

var yourVideoElement = hypeDocument.getElementById('yourVideo');
    yourVideoElement.pause();
    
    var newVideoUrl = 'https://player.vimeo.com/external/192793368.sd.mp4?s=d99f42e90e98011c43aaf65e66ed98a6313276d1&profile_id=165' ;//new url here
    var newType = 'video/mp4';//new type here
//delete all existing sources of the video
    var oldSources = yourVideoElement.getElementsByTagName('source');
    var l = oldSources.length;
    while(l--)
    {
    yourVideoElement.removeChild(oldSources[l])
    }
//update video
    yourVideoElement.load()
    
//add a new source
    var src = document.createElement('source');
    src.src= newVideoUrl;
    src.type= newType;
    yourVideoElement.appendChild(src);
//update the video
    yourVideoElement.load();
   //play when ready     
    yourVideoElement.oncanplay = yourVideoElement.play();

for example assign it to a buttonbehaviour …

1 Like

Heya!

Many thanks for your reply and extensive code sample. It really is a wealth of really enlightening information and I really appreciate it.

It works perfectly for MP4s using the .mp4 extension with the video/MP4 type. However, many of the videos I need to use are in MOV format, and for some reason I’m not getting the same success. I have tried using various different video types for the NewType variable, including:-

"video/mp4"
“video/quicktime”
“video/ogg”
“video/mov”

However, none of these seem to work. The element becomes blank.

Any idea why this could be? Technically the source format of the MOVs that I’m trying to use are listed as “video/quicktime” but I’m getting no luck using that as the type.

I can confirm that the MOV files work perfectly in Hype as a manually imported element - it just doesn’t seem to work when being triggered with JS from your code sample.

(My other MP4 files work perfectly).

:slight_smile:

Are you referencing the videos including the substitute variable for the resources folder.

"${resourcesFolderName}/name-of-video-in-resources-folder..."

in the “newVideoUrl”. Oh and also try video/mp4 for the type even with .MOV’s

I have indeed yes. I’ve tried multiple variations of type for MOV without success. It’s weird because the code works fine for .mp4 extensions with a video/mp4 type but only fails for MOV instances whichever type is attempted. And what’s weirder is that the original MOV files play fine when manually imported into an element.

var yourVideoElement = hypeDocument.getElementById('yourVideo');
yourVideoElement.pause();
var newVideoUrl;
var newType;
var vid = [
	'${resourcesFolderName}/vid1.mov',
	'${resourcesFolderName}/vid2.mov',
	'${resourcesFolderName}/vid3.mov',
	'${resourcesFolderName}/vid4.mov',
	'${resourcesFolderName}/vid5.mov',
	'${resourcesFolderName}/vid6.mov'
          ];
var x = Math.floor((Math.random() * 6) + 1);
x = x - 1;
newVideoUrl = vid[x];
newType = 'video/mp4';

var oldSources = yourVideoElement.getElementsByTagName('source');
var l = oldSources.length;
while(l--)
	{
	yourVideoElement.removeChild(oldSources[l])
	}
yourVideoElement.load()
var src = document.createElement('source');
src.src= newVideoUrl;
src.type= newType;
yourVideoElement.appendChild(src);
yourVideoElement.load();
yourVideoElement.oncanplay = yourVideoElement.play();

I’m not an expert in video encoding :slight_smile:

what does the console say¿ have you inspected the elements …¿

anyway … you should offer some url or better hype file with simple setup to get some insight!

… and i’m not shure if *.mov is the best choice -> https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Thanks for this it works well for me. Is there a way to start the new video from a specific time?

Thank you!
Matt

Browsers don't support .mov files reliably -- thought Safari is sometimes OK with it. You need to use a video encoder to get a h264 encoded file, which will be a .mp4 file format. Then you can use "video/mp4" as your codec type. This page can help you convert: http://convert-video-online.com

The basic workflow for this is below:

// Create a var for the video
var myvideoID = document.getElementById("idOfVideo"); 
// Go to 10 seconds in and play. 
myvideoID.currentTime = 10;
myvideoID.play();

You need to make sure your video has preload="auto" on it, so that your browser knows how long the video file is.

Edited, wrong subject post, but this helped too! Posted where need to be

I think you meant to post that in the other thread

1 Like