Video Element Picture-In-Picture in JavaScript Tutorial

Submitted by oretnom23 on Thursday, March 31, 2022 - 14:09.

In this tutorial, I will show how to Create a Picture-In-Picture Feature for your website's videos. The Picture-In-Picture is a feature that allows your user to stream the video within an inset window on your screen. With this, the user can continue reading the other content of the page while the video still playing in a window of your screen. Users can also continue to stream the video using the said feature while they are at the other window.

Here, I will be providing a simple web application that can contain a Picture-In-Picture Feature without using the built-in control for this feature in the video Element. The goal of the application is to have a custom button where the user triggers the Picture-In-Picture Feature. The application will also trigger the said feature when the page is scrolled while playing the video.

Getting Started:

I am using Bootstrap v5 on this simple application for the design of the user interface. Also, I am using jQuery Library. You can download it using links that I provided below.

getbootstrap.com for the Bootstrap Framework.
jquery.com for the jQuery Library.

Please compile the Framework and Library's files in your source code directory. In my case, all css files are compiled into a css directory and js files into a js directory.

Creating the Interface

Now, we will be creating the main template interface of the application. Create a new HTML File in your source code folder naming index.html. Next, open the file into your preferred text editors such as notepad++ and sublime text. Copy/Paste the HTML Script below and save it. The file contains the script of the elements in our application intarface including the video element. Make sure that the imported external CSS and JS file paths are correct according to the locations of the files on your end.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Picture-in-Picture</title>
    <link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/custom.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
</head>
 
<body class="bg-light">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar">
        <div class="container">
            <a class="navbar-brand" href="https://sourcecodester.com">
            Sourcecodester
            </a>
 
            <div>
                <b class="text-light">Video Picture-in-Picture</b>
            </div>
        </div>
    </nav>
    <div class="container py-5" id="page-container">
        <!-- Video Container -->
        <div id="vid-container">
            <video src="sample-mp4-file.mp4" id="vid-el" class="w-100" controls></video>
        </div>
        <!-- End of Video Container -->
        <!-- Picture in Picture Button -->
        <div class="text-center">
            <button class="btn btn-primary btn-lg px-4" type="button" id="btnPiP">Enable Picture-In-Picture</button>
        </div>
        <!-- End of Picture in Picture Button -->
        <h3 class="text-center"><b>Try to play the video and scroll down</b></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis mauris eros, sit amet commodo ipsum aliquam a. Aliquam rutrum interdum accumsan. Fusce vel suscipit libero. Vestibulum tristique risus purus, eget interdum velit eleifend eu.
            Mauris malesuada faucibus odio, non eleifend nibh mattis eget. Vivamus commodo maximus tellus, ac mollis urna ultricies sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam scelerisque
            turpis sit amet euismod semper. Aenean sed maximus justo. Sed commodo suscipit metus sed interdum. Maecenas condimentum mollis tortor, quis scelerisque sem efficitur ullamcorper. Maecenas varius est a enim dictum, auctor auctor velit sagittis.
            Cras congue feugiat ultricies.
            <br><br> Praesent ligula leo, pharetra id lacinia eu, semper et sapien. Duis eleifend ex sem, in rhoncus libero hendrerit bibendum. Morbi luctus nibh sit amet blandit eleifend. Vestibulum sodales tellus eget mauris tempor interdum. Nulla ornare
            at libero nec lobortis. Ut at eleifend neque, sed cursus augue. In hac habitasse platea dictumst. Phasellus pharetra gravida diam, ut finibus orci bibendum ut. Praesent sed sagittis ante. Maecenas varius diam at nibh ultricies accumsan. Vestibulum
            commodo felis eu magna convallis, non feugiat lectus elementum. Ut aliquam magna id nisl dapibus posuere. Cras id justo bibendum, scelerisque elit ac, pellentesque diam.
            <br><br> In faucibus metus non augue ornare, et dictum est laoreet. Suspendisse finibus tellus eget pellentesque consectetur. Vestibulum at accumsan massa, ac gravida tellus. Vivamus dignissim leo sed condimentum congue. Quisque auctor dapibus
            ante, quis interdum neque suscipit eu. Fusce sed imperdiet odio. Nulla sed orci eu erat eleifend fringilla ac ut risus. Donec vitae lacus tincidunt, scelerisque nisi sed, faucibus odio.
            <br><br> Aliquam erat volutpat. Sed consequat tempor sem ut rutrum. Fusce ac egestas sapien. Sed sit amet felis ut nibh scelerisque sollicitudin in vitae nunc. Pellentesque cursus, leo nec sollicitudin suscipit, quam justo rutrum augue, quis
            posuere risus turpis vitae leo. Aliquam luctus velit ac leo rhoncus interdum. Etiam gravida congue tortor et scelerisque. In at lorem urna. Etiam iaculis quam sit amet metus suscipit pellentesque non ut dolor. Nullam at orci id risus volutpat
            fermentum vitae in nisi. Curabitur maximus scelerisque mauris vel imperdiet. Fusce leo nulla, cursus eget massa elementum, rutrum lobortis erat. Donec vehicula nec augue non consequat.
            <br><br> Donec venenatis orci sed pharetra vestibulum. Vestibulum laoreet, nisl eu tristique convallis, eros magna finibus nunc, elementum eleifend mauris magna nec velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
            per inceptos himenaeos. Aenean luctus blandit justo faucibus placerat. Fusce venenatis ornare purus, nec lobortis nisi eleifend pretium. Aliquam erat volutpat. Vestibulum et iaculis libero. Morbi aliquam turpis at risus suscipit, non tincidunt
            dui elementum. Mauris malesuada luctus orci in mattis. Nulla euismod feugiat odio, a hendrerit nunc commodo et. Nam mollis risus sapien, ut scelerisque lorem lobortis ac. Fusce suscipit iaculis enim vel lobortis. Aenean ut molestie magna.
            Phasellus a tortor in mauris ultrices rhoncus.</p>
 
    </div>
</body>
</html>

Creating the Custom CSS

Next, we will be creating a CSS File that contains the CSS scripts for the custom design of some elements in our interface. Save this file as custom.css. In my case, this file is located inside the CSS directory. Make sure to import the file in the index.html file.

:root {
    --bs-success-rgb: 71, 222, 152 !important;
}
 
html,
body {
    height: 100%;
    width: 100%;
    font-family: Apple Chancery, cursive;
}
 
.btn-info.text-light:hover,
.btn-info.text-light:focus {
    background: #000;
}
 
#vid-el {
    height: 60vh;
    background: linear-gradient(0deg, #3c3b3b, #424242, #000000);
    object-fit: unset;
    object-position: center center;
}

Creating the Custom JavaScript

Lastly, we will create an external JavaScript File which contains the all the event listeners and script to achieve the Picture-in-Picture Feature into our application. Save this file as script.js and in my case this file is located inside my js directory. Make sure also to import this file in the index.html file.

var videoEl, pipBtn, isPlay;
$(function() {
    videoEl = $('#vid-el')
    pipBtn = $('#btnPiP')
        // Check if the browser supports a picture in picture
    if ('pictureInPictureEnabled' in document) {
 
        // Picture In Picture Button Event Listener
        pipBtn.click(function() {
            if (!pipBtn.hasClass('is-enabled')) {
                videoEl[0].requestPictureInPicture().catch(err => {
                    console.error(err)
                })
 
            } else {
                console.log('close pip')
                document.exitPictureInPicture().catch(err => {
                    console.error(err)
                })
            }
        })
 
        // Event Lister for Video enters in Picture-in-Picture
        videoEl[0].addEventListener('enterpictureinpicture', function() {
            pipBtn.text("Exit Pincture-in-Picture").addClass('is-enabled')
            console.log('PiP Enabled')
            videoEl[0].play()
 
        })
 
        // Event Lister for Video leaving in Picture-in-Picture
        videoEl[0].addEventListener('leavepictureinpicture', function() {
            pipBtn.text("Enable Picture-In-Picture").removeClass('is-enabled')
            console.log('Leaved the PiP')
            videoEl[0].pause()
        })
 
        // Following Event Listener is for forcing users to make click gestures to prevent PIP API Gesture Error 
 
        // Event Listener when the video plays
        videoEl[0].addEventListener('playing', function() {
            isPlay = true
            console.log(isPlay)
 
        })
 
        // Event Listener when the video has paused
        videoEl[0].addEventListener('pause', function() {
            isPlay = false
            console.log(isPlay)
        })
 
        // Enter and Leave Picture in Picture when scrolling when Video is playing
        $(window).on('scroll', function() {
            $(window).trigger('focus')
            var vidElOffset = videoEl.offset().top + (videoEl.height() * .3)
            var currentPos = $(window).scrollTop()
            if (isPlay === true) {
                if (currentPos > vidElOffset) {
                    videoEl[0].requestPictureInPicture().catch(err => {
                        console.error(err)
                    })
                } else {
                    if (document.pictureInPictureElement)
                        document.exitPictureInPicture().catch(err => {
                            console.error(err)
                        })
                }
            }
        })
 
    } else {
        // Disabling the PIP Button if not supported
        pipBtn.text("Picture-In-Picture is Not Supported").attr('disabled', true)
    }
 
})

That's it!. Now you can test the application on your side and see if it works as we planned.

DEMO VIDEO

If you encountered an error on your end, feel free to leave a comment below. You can also download the working source code that I provided for this tutorial. The download button is located below this article.

That's the end of this tutorial. I hope you'll find tutorial useful for your future Web Application Projects. Explore more on this website for more Free Source Codes and Tutorials.

Enjoy Coding :)

Add new comment

447 views