Skip to content

Playing a stream in custom HTML5 video element

By default, WebSDK creates HTML5 video element to play a stream automatically. However, in some cases it is necessary to play a stream on custom video element, for example, to use custom controls. Let's tweak Two Way Streaming application code.

  1. Add video element to example HTML page

    <div class="col-sm-6">
         <div class="text-center text-muted">Player</div>
         <div class="fp-Video">
             <div id="remoteVideo" class="display"><video id="videoControls" controls="controls"></video></div>

  2. Pass the custom video element to Session.createStream() function using remoteVideo parameter

    var videoControls = document.getElementById("videoControls");
    function playStream() {
        var session = Flashphoner.getSessions()[0];
        var streamName = $('#playStream').val();
            name: streamName,
            display: remoteVideo,
            remoteVideo: videoControls
        }).on(STREAM_STATUS.PENDING, function (stream) {
            var video = videoControls;
            if (!video.hasListeners) {
                video.hasListeners = true;
                video.addEventListener('resize', function (event) {

  3. Publish test stream in modified Two Way Streaming example and play it on custom video element with controls enabled