Wikitude

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.

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.

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')
          }
});

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?

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.