Start a new topic

Link an Imagedrawable with a layout or video full screen

Hello!

I would like to know how I can link a button (Imagedrawable) with a layout or with the reproduction of a full screen video located in a folder when I click it.


Hi Rodrigo,


can you tell us a little bit more, what you want to achieve exactly? What environment and platform are you working with ?


Thx

Phil

I was able to make video snapping work, I just needed to configure some parameters in the css.

Now I would like to know how I can make the video is full screen.

Hi Rodrigo,


As the error message says, you are missing the android support library. Pls configure your Android project accordingly.


        * > Could not find support-v4.jar (com.android.support:support-v4:24.1.1).


Thanks

Eva

Hi,


Please follow the instructions described thoroughly in out documentation here https://www.wikitude.com/external/doc/documentation/latest/android/workingwithvideos.html#fullscreen-videos.


Thanks

Eva

I'm using Wikitude SDK 5.3 in a project and I want that when I put the device in the marker I get a button that when I press it, I play a full screen video.


I was trying with a videodrawable but when I stopped focusing on the marker, the video disappears.


For that reason I want to know how I can link the button (imagedrawable) with a layout so that when clicking it, open a videoview that is for the reproduction of the video.

Hi,


you might want to have a closer look at the chapter Video Drawables in the documentation. Particularly at Snapping Video, which I guess is doing what you are looking for.


Cheers

Phil

I added the functions indicated by the page but when I leave the focus of the tracker the video is not kept on the screen.

This is my code:


These are functions to create the play, stop and exit video buttons

createPlayVideoBtn: function createPlayVideoBtnFn(imgButton, size, video, x, y, stopButton) {
var Vpbtn = new AR.ImageDrawable(imgButton, size, {
offsetX: x,
offsetY: y,
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.LEFT,
onClick : function() {
video.enabled = true,
stopButton.enabled = true,
video.play();
}
});
return Vpbtn;
},

createStopVideoBtn: function createStopVideoBtnFn(imgButton, size, video, x, y) {
var Vsbtn = new AR.ImageDrawable(imgButton, size, {
offsetX: x,
offsetY: y,
enabled: false,
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.LEFT,
onClick : function() {
Vsbtn.enabled = false,
video.stop();
video.enabled = false;
}
});
return Vsbtn;
},

createReturnBtn: function createReturnBtnFn(imgButton, size, overlay, audio, playButton, x, y) {
var Rbtn = new AR.ImageDrawable(imgButton, size, {
offsetX: x,
offsetY: y,
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.BOTTOM,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.LEFT,
onClick : function() {
Rbtn.enabled = false,
overlay.enabled = false;
playButton.enabled = false,
audio.stop();
}
});
return Rbtn;
},


and this is the videodrawable along with the trackable



var video1 = new AR.VideoDrawable("assets/videos/video1.mp4", 1.05, {
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.MIDDLE,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
/*isTransparent: true,*/
enabled: false,
onFinishedPlaying: function() {
video1.enabled = false;
}
});

var page2StopButton = this.createStopVideoBtn(stopBtn, 0.35, video1, 1.25, -0.65);
var page2PlayButton = this.createPlayVideoBtn(imgVideoBtn, 0.35, video1, -1.25, -0.65, page2StopButton);
var page2ReturnButton = this.createReturnVBtn(returnBtn, 0.35, video1, page2PlayButton, 0.95, -0.65);

var page2 = new AR.Trackable2DObject(this.tracker, "Foca", {
drawables: {
cam: [video1, page2PlayButton, page2StopButton, page2ReturnButton]
},
onImageRecognized: function onImageRecognizedFn() {
if (video1.playing) {
video1.resume();
}
},
onImageLost: function onImageLostFn() {
if (video1.playing) {
video1.pause();
}
},
onEnterFieldOfVision: function onEnterFieldOfVision(){
page2PlayButton.enabled = true;
page2ReturnButton.enabled = true;
World.page2.snapToScreen.enabled = false;
},
snapToScreen: {
enabledOnExitFieldOfVision: true,
snapContainer: document.getElementById('snapContainer')
}
});





I have tried changing the code based on the wikitude sdk 5.3, but it still doesn't work. What am I doing wrong?


      var video1 = new AR.VideoDrawable("assets/videos/video1.mp4", 1.05, {
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.MIDDLE,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
/*isTransparent: true,*/
enabled: false,
onFinishedPlaying: function() {
video1.enabled = false;
}
});

var page2StopButton = this.createStopVideoBtn(stopBtn, 0.35, video1, 1.25, -0.65);
var page2PlayButton = this.createPlayVideoBtn(imgVideoBtn, 0.35, video1, -1.25, -0.65, page2StopButton);
var page2ReturnButton = this.createReturnVBtn(returnBtn, 0.35, video1, page2PlayButton, 0.95, -0.65);

var page2 = new AR.Trackable2DObject(this.tracker, "Foca", {
drawables: {
cam: [video1, page2PlayButton, page2StopButton, page2ReturnButton]
},
onEnterFieldOfVision: function onEnterFieldOfVision(){
page2PlayButton.enabled = true;
page2ReturnButton.enabled = true;
World.page2.snapToScreen.enabled = false;
},
snapToScreen: {
enabledOnExitFieldOfVision: true,
snapContainer: document.getElementById('snapContainer')
}
});

Hi,


Please have a close look at the SDK sample app - there is a fully functional sample which demonostrates the behaviour - if the users lost the focus of the target image, the video is sticking to the screen and also displayed when the target image is lost.


If you make the sample run investigate the code, make sure that you know how it's working and compare it to your code base. If you have crashes or irregular behaviour with the SDK, please let us know anytime.


Thx and greetings

Nicola

If you are using SDK 5.3 the onImageRecognized call-backs won't be available. I'd suggest you either upgrade to SDK 7.2 or stick to the documentation and samples of SDK 5.3 

Wanting to try the wikitude sdk sample, I got the following problem:


A problem occurred configuring project ':wikitude-sdk-samples'.

> Could not find support-v4.jar (com.android.support:support-v4:24.1.1).

  Searched in the following locations:

      https://jcenter.bintray.com/com/android/support/support-v4/24.1.1/support-v4-24.1.1.jar


How can I fix it?

Login or Signup to post a comment