Awards Room - adding video

There are 2 options for adding video:

  • Youtube - add a stream hosted by youtube
  • Custom - add any other player using customer player code

Youtube

The youtube options simply takes the value of the player code, no other configuration is required.

Custom

The customer player provides complete flexibility over how the player can be used.

Standard Custom Players

  • Players like Vimeo and others can be embedded using iframes
  • This method does not include any scripts and so does not require any advanced options
<iframe src="https://player.vimeo.com/video/501775843?loop=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Advanced Custom Player Options

  • In some cases, the player might require some additional JavaScript code to be run
  • The "Video Feed Scripts" section can be used to:
    • Include external libraries
    • Run code snippets
    • Execute JavaScript code after the player has been loaded using the eventListener

The same example above may also have advanced options which would require the use of both custom player boxes. e.g.

Custom Video Feed Player

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/501775843?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>

Video Feed Scripts

<script src="https://player.vimeo.com/api/player.js"></script>

Using a VideoJS player with an RTMP feed

Below is an example of using a custom player with and RTMP feed

Custom Video Feed - Player 
<div style="width: 100%;" class="video-js vjs-16-9 vjs-big-play-centered">
<video-js id="custom-rtmp-player" style="position:absolute;top:0;left:0;width:100%;height:100%;" class="vjs-default-skin" controls>
  <source src="https://cdn3.wowza.com/1/MEtJTWlvRTI3ZHlH/NVYrWlp0/hls/live/playlist.m3u8" type="application/x-mpegURL">
</video-js>
</div>
Custom Video Feed - Scripts
  • There is an event handler which can be used to run code after the video player has been rendered to the page
  • The below example shows a video.js player being initialised via the event handler
  • There is extra data provided in the event.detail object:
    • e.detail.roomUUID - the unique id of the current room
    • e.detail.roomSlug - this slug is used in the URL for the current room
<script src="https://cdn.evessio.com/themes/common/js/a7216d61-48bf-46f5-8457-aa732287b978.js"></script>
<script>
var vjsPlayer = null;
window.addEventListener('videoPlayerLoaded', function (e) {
    console.log('videoPlayerLoaded', e.detail.roomUUID, e.detail.roomSlug);
    setTimeout(function(){
        var playerNode = $('#custom-rtmp-player');
        console.log('playerNode', playerNode.length);
        if (playerNode.length){

            if (vjsPlayer){
                vjsPlayer.dispose()
            }

            vjsPlayer = videojs('custom-rtmp-player', { muted: true });

            vjsPlayer.ready(function() {
                vjsPlayer.muted(true);
                var promise = vjsPlayer.play();
                console.log('call play');
                if (promise !== undefined) {
                    promise.then(function() {
                        // Autoplay started!
                        console.log('play started');
                        vjsPlayer.muted(false);
                    }).catch(function(error) {
                        // Autoplay was prevented.
                        console.log('cannot start player');
                    });
                }
            });
        }
    },100);

}, false);

</script>