Skip to content

How To: Showing a fullscreen video from a tap on an object in my awe app

Jump to bottom
awe.media edited this page Feb 25, 2022 · 5 revisions

Showing a fullscreen video from a tap on an object in my awe app

It's easy to add video objects within the 3D scenes in your awe app. But some designers also want to give their users the option to view these videos in a full screen experience. This gives you all the information you need to do this.

Adding global javascript functions

First we will set up some code to play videos that can be run app-wide. Add the following code to App Settings > Custom Code > JS (e.g. /settings/custom_code). Note that it's important you put this at the top level and not inside the default go() function. This is so the play_video_asset() and close_video() functions are available on the window object.

var video_playing;
var timeout = 300;
var inline_player;
function play_video_asset(asset_id) {
  if (application.current_view.position_type == 'vision' && application.get_current_state() == 'live') {
    var nftp = awe.plugins.view('nft');
    if (nftp && nftp.is_running()) { nftp.is_running(false); }
  }
  var asset = application.get_app_asset(asset_id);
  if (!asset) { return; }
  if (!inline_player) {
    var wrapper = document.getElementById('project_html');
    inline_player = document.createElement('div');
    inline_player.classList.add('custom-inline-player');
    document.getElementById('project_html').appendChild(inline_player);
  }
  var video_url = awe.util.get_asset_file_url(asset_id, 'hd');
  inline_player.innerHTML = '<a href="javascript:void(0)" class="close_btn" onclick="close_video()"></a><video webkit-playsinline playsinline controls="" crossorigin="anonymous" id="video_'+asset_id+'" class="custom-inline-video" src="'+video_url+'"></video>';
  var video = document.getElementById('video_'+asset_id);
  if (video) {
    video.parentNode.classList.add('visible');
    video_playing = video;
    video.addEventListener('ended', close_video);
    video.play();
  } else {
    alert('no video element with id', id)
  }
}
function close_video(e){
  if (video_playing) {
    if (application.current_view.position_type == 'vision' && application.get_current_state() == 'live') {
      var nftp = awe.plugins.view('nft');
      if (nftp && !nftp.is_running()) { nftp.is_running(true); }
    }
    video_playing.parentNode.classList.remove('visible');
    video_playing.pause();
    video_playing = null;
  }
}

Adding global styles

Then add the following styles in the App Settings > Custom Code > CSS (e.g. /settings/custom_code) to display the video in full viewport.

.custom-inline-player {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,1);
  left: 0;
  top: 0;
  z-index: 9999;
  display: none;
  pointer-events:none;
}
.custom-inline-player.visible {
  display: block;
  pointer-events:initial;
}
.custom-inline-player .custom-inline-video {
  margin: auto;
  width: 100%;
  height: 100%;
}
.custom-inline-player .close_btn {
  height: 50px;
  width: 50px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 10;
  display: block;
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjkuMTYgMTY5LjE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjAwMDt9LmNscy0ye2ZpbGw6IzM2NDM0ZDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFSX2J1dHRvbl9BU1NFVFNfQ2xvc2U8L3RpdGxlPjxnIGlkPSJDaXJjbGUiPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iODQuNTgiIGN5PSI4NC41OCIgcj0iODQuNTgiLz48L2c+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNDY4LjI4LDY5TDQ0Ni40OSw5MGwtMjEtMjEuOGEyLjQzLDIuNDMsMCwxLDAtMy41LDMuMzhsMjEsMjEuODEtMjEuNzksMjFhMi40MywyLjQzLDAsMCwwLDMuMzgsMy41MWwyMS43OS0yMSwyMSwyMS43OGEyLjQzLDIuNDMsMCwwLDAsMS43Ni43NSwyLjM4LDIuMzgsMCwwLDAsMS42OS0uNjksMi40MywyLjQzLDAsMCwwLC4wNy0zLjQ1bC0yMS0yMS43OSwyMS43OS0yMUEyLjQzLDIuNDMsMCwxLDAsNDY4LjI4LDY5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM2MS44NCAtOC44NCkiLz48L3N2Zz4=) center center no-repeat;
}

Note that you will want to change the button defined in the CSS above (.custom-inline-player .close_btn background) to match your awe app design.

Using this code on a projection

Now you can use the code to set up your projections so they play a fullscreen video when your user clicks or taps on them.

  1. Upload your video to your media library
  2. Find the 'Asset ID' of this video by clicking the (i) button on it's thumbnail in your media library. This is the ASSET_ID
  3. Create a projection and add an Action that plays "On select'
  4. Pick 'Custom script' from the Action type options
  5. Paste the following code in the textarea provided then click 'Done' to save.

Make sure you replace the ASSET_ID with the video Asset ID you wish to play

play_video_asset(ASSET_ID);

Now when users tap or click on the object in your scene (e.g. your projection) your awe app will show them a video in full screen.

In scene video interactions

By default your users can toggle the play() and pause() state of your in-scene videos by clicking or tapping on them. You can control in-scene video playback settings by selecting the video object in the editor then selecting ... and selecting Video settings. You'll see an option called Toggle play/pause on select. You can turn this on/off here.

If you want the video to play fullscreen when the user taps on the in-scene video then we'd recommend turning Toggle play/pause on select off so it doesn't fight with the custom script Action you've just added. You may also want to use custom code to pause the video too so add this line above the .play_video_asset() call.

awe.projections.view(projection_id).pause_video_texture(); // projection_id is automatically pre-populated in Actions
play_video_asset(ASSET_ID);

If you want the user to still be able to tap the in-scene video to pause/play then we'd recommend leaving Toggle play/pause on select turned on and adding another image object (e.g. a fullscreen button) that sits over or near the video within the scene and putting the play_video_asset() custom script Action on that.

Clone this wiki locally