[SOLVED] Adding a video from a link

Is it possible to add videos to my game using the web link not uploading them within my project Assets, to decrease the loading time

Hi @AhmedFarahat,

Definitely! Quoting the Video Textures examples, you can use your video url here:

  video.src = 'https://myvideoUrl.mp4';

Just make sure you have CORS enabled in your server, so it can be served correctly!

Cool thanks! regarding the CORS, if i am using a youtube video is there something i should add in the script? i have a plugin on my browser that enable/disable CORS.

I think youtube videos will play ok, but do give them a try.

Your browser plugin CORS extension is great, but that will fix the issue only for you. If a CORS error comes up on your users’ browsers, then the video won’t play there.

Actually I take this back, I was hasty to answer. Their video pages can be opened from 3rd party sites, but the video stream url isn’t available outside of their player.

You will have to find a library or service that can extract a .mp4 url from each youtube video url. Only that you can use in the Playcanvas side to render on a texture.

Also make sure to read if that’s legal according to their terms of use.

You could also upload the video to your own, or third party host.

1 Like

I think you can have their video stream, but you need to use Google API and authenticate your requests first.

1 Like

Solved Thanks

Hi Ahmed, can you please let us know how you solved this? Can you share the source files please?

Hi I hope the below would help, this is my file, the only way I was able to have the videos, is by pushing them to my repository on github and then use the raw link to add in the below code. Good luck

var BtnStates1 = pc.createScript(‘btnStates1’);

BtnStates1.attributes.add(‘buttonEntity’, {type: ‘entity’});

BtnStates1.attributes.add(‘hoverAsset1’, {
type:‘asset’,
assetType:‘texture’
});

BtnStates1.attributes.add(‘activeAsset1’, {
type:‘asset’,
assetType:‘texture’
});

BtnStates1.attributes.add(‘css’, {
type: ‘asset’,
assetType:‘css’,
title: ‘CSS Asset’
});
// initialize code called once per entity
BtnStates1.prototype.initialize = function() {
// Get the original button texture
this.originalTexture = this.entity.element.textureAsset;

// Whether the element is currently hovered or not
this.hovered = false;

// mouse events
this.entity.element.on('mouseenter', this.onEnter, this);
this.entity.element.on('mousedown', this.onPress, this);
this.entity.element.on('mouseup', this.onRelease, this);
this.entity.element.on('mouseleave', this.onLeave, this);

// touch events
this.entity.element.on('touchstart', this.onPress, this);
this.entity.element.on('touchend', this.onRelease, this);
this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);

};

// When the cursor enters the element assign the hovered texture
BtnStates1.prototype.onEnter = function (event) {
this.hovered = true;
event.element.textureAsset = this.hoverAsset1;

// set our cursor to a pointer
document.body.style.cursor = 'pointer';

};
// When the cursor leaves the element assign the original texture
BtnStates1.prototype.onLeave = function (event) {
this.hovered = false;
event.element.textureAsset = this.originalTexture;

// go back to default cursor
document.body.style.cursor = 'default';

};

BtnStates1.prototype.onKeyDown = function (event) {
var app = this.app;
if (event.key === pc.KEY_ESCAPE ) {
document.getElementById(“help”).outerHTML = “”;
// setTimeout(function (){
// document.getElementById(“help”).outerHTML = “”;
// }, 100);
}
event.event.preventDefault();
};
// When we press the element assign the active texture
BtnStates1.prototype.onPress = function (event) {
var style = document.createElement(‘style’);

document.head.appendChild(style);
style.innerHTML = this.css.resource || '';

this.div = document.createElement('div');
this.div.setAttribute("id", "help");
this.div.classList.add('container');
this.div.innerHTML = 'video link in single quotes ';

document.body.appendChild(this.div);
this.div = document.getElementById('help');

};

// When we release the element assign the original texture if
// we are not hovering or the hover texture if we are still hovering
BtnStates1.prototype.onRelease = function (event) {
event.element.textureAsset = this.hovered ? this.hoverAsset1 : this.originalTexture;
};