JS.AudioVideo.CustomVideoPlayer.v4

9/25/2018 - 8:03 AM

JS.AudioVideo.CustomVideoPlayer.v4

/*****************************************************************************************************************************************************************************************************LAYOUTS******************/

/*****************RESET*****************/
/***************************************/
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


.hidden {
    display: none !important;
}

html, body {
    width: 100%;
}

@media only screen and (min-width: 768px) {

    html, body  {
        position: relative;
        height: 100vh;
    }

    body {
        overflow-x: hidden; /* For IE */
    }

}


/***************************************/
/*****************CONTAINER************/
/***************************************/

.container {
    width: 100%;
}


@media only screen and (min-width: 768px){

    .container {
        position: absolute;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        margin-top: 15px;
    }
}


/***************TITLE*****************/

.title {
    height: 30px;
    padding: 2px;
    padding-left: 20px;
}



/***************************************/
/**************VIDEO CONTAINER**********/
/***************************************/

.video-container {
    position: relative;
    width: 100%;
}

[class*="col-"] {
    width: 100%;
}


/* The idea for proportionality of height to width (16:9) is taken from
 https://spin.atomicobject.com/2015/07/14/css-responsive-square/ */
@media only screen and (min-width: 768px) {
    .col-16-20 {
        position: relative;
        float: left;
        width: 80%;
    }

    .col-16-20:after {
        content: "";
        display: block;
        padding-bottom: 56.25%;
    } 
}

video {
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 768px) {
    video {
        position: absolute;
        width: 100%;
    }
}


.button-on-top {
    position: absolute;
    left: 50%;
    top: calc(50% - 30px); /*A half from 60px for video controls */
    /* transform: translate(-50%, calc(-50% + 30px)); */
    transform: translate(-50%, calc(-50% + 15px));
}



/***********VIDEO CONTROLS**************/

.video-controls {
    position: absolute;
    display: none;
    width: 100%;
    height: 60px; 
    bottom: 3px;
    padding-bottom: 2px;
}

@media only screen and (min-width: 768px) {
    .video-controls  {
        bottom: 0px;
    }
}

.control-button {
    float: left;
    width: 20%;
    padding-top: 5px;
    padding-bottom: 5px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
}

/**IE**/
.slider::-ms-track {
    width: 100%;
    height: 5px;
}

.slider::-ms-thumb {
    height: 16px;
    width: 16px;
}


/***************************************/
/****************PALYLIST**************/
/***************************************/

.playlist, .next-video-container {
    width: 100%;
}


@media only screen and (min-width: 768px) {
    .col-4-16 {
        position: relative;
        width:20%;
        float: right;
    }

    .col-4-16:after {
        content: "";
        display: block;
        padding-bottom: 225%;
    }
}

.up-next {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    margin: 5px 0px;
}

@media only screen and (min-width: 768px) {
    .up-next {
        position: absolute;
        margin: 0px;
        left: 5px;
        width: calc(100% - 22px); /*for IE - 15px for scrool */
        width: calc(100% - calc(10px + 5px)); /*10px for scrool and 5px for left margin of video container*/
        height: 50px;
    }
}


@media only screen and (min-width: 768px) {
    .next-video-container {
        position: absolute;
        width: 100%;
        /* height: 100%;  */
        height: calc(100% - 88px); /*50px for up-next div and 34px for playlist buttons and 4px for padding from next v*/
        bottom: 34px;
        overflow-y: scroll;
        overflow-x: hidden; /*To avoid scrool in IE */
        margin: 0px 5px; 
        padding-right: 5px;
    }
}

a {
    display: inline-block;
    width: 100%;
    position: relative;
}

a:hover {
    opacity: 0.5;
}

@media only screen and (min-width: 768px) {
    a:hover {
        opacity: 1;
    }
}

img {
    width: 30%;
    height: auto;
    float: left;
}

@media only screen and (min-width: 768px) {
    img {
        width: 100%;
        height: auto;
    }
}

.next-video-info {
    display: block;
    width: 70%;
    height: 100%;
    float: right;
    padding: 10px;
}

@media only screen and (min-width: 768px) {
    .next-video-info {
        display: none;
        position: absolute;
        width: 100%;
        float: none;
        padding: 0px;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);

    }

    a:hover .next-video-info {
        display: inline-block;
    }
    .next-video-title{
        position: absolute;
        width: 100%;
        float: none;
        padding: 0px;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
    }
}

/***************playlist controls***********/

.playlist-controls {
    width: 70%;
    height: 20px;
    float: right;
    position: relative;
}

.show-on-sm {
    display: block;
    top: 50%;
    transform: translateY(-50%);
}

.hide-on-sm {
    display: none;
}

@media only screen and (min-width: 768px) {
    .playlist-controls {
        width: calc(20% - 22px); /*for IE - 15px for scrool */
        width: calc(20% - calc(10px + 5px)); /*10px for scrool and 5px for left margin of video container*/
        height: 30px;
        bottom: 30px;
        left: -17px; /*for IE*/
        left: calc(-1 * calc(5px + 5px)); /*10px for scrool */
        float: right;
    }

    .hide-on-sm {
        display: block;
    }

    .show-on-sm  {
        display: none;
    }
    
}

.playlist-button {
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
}

.fa-pinterest-p, .fa-random, .fa-sync {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 3px;
} 

/***************scrool****************/
::-webkit-scrollbar {
    width: 10px;
}


/**********************************************************************************************************************************************************************************STYLES*******************/

body {
    background-color: #eff5f5;
    font-size: 16px;
}

/*****************CONTAINER***************/
/****************************************/


.container {
    /* background: linear-gradient(90deg, darkgrey, #666666, darkgray); */
    background: linear-gradient(90deg, #cccccc, #ccffdc, #cccccc);
}

@media only screen and (min-width: 768px){
    .container {
        /* border-radius: 25px; */
        -webkit-box-shadow: 0 0 30px #227722;
        box-shadow: 0 0 30px  #227722;
    }
}    

/***************TITLE*****************/

.title {   
    color: #000000;
    border-radius: 20px 20px 0px 0px;
    font-size: 0.9em;
    text-shadow: 0px -1px 0px #ffffff;
}

@media only screen and (min-width: 768px){
    .title {   
        border-radius: 20px 20px 0px 0px;
    }
}


/************VIDEO CONTAINER*********/
/***********************************/

@media only screen and (min-width: 768px){
    .video-container {
        /* background: rgba(0,0,0,0.5); */
    }
}

video:hover {
    cursor: pointer;
}

@media only screen and (min-width: 768px){
    video {
        /* border-radius: 20px; */
    }
}

.fa-play-circle, .fa-pause-circle {
    color: #ffffff;
    opacity: 0.8;
}


/************controls***************/

.video-controls  {
    background-color: rgba(0,0,0,0.5);
}

@media only screen and (min-width: 768px){
    .video-controls {
        /* border-radius: 0px 0px 20px 20px; */
    }
}

.control-button {
    text-align: center;
    color: #ffffff;
}

.fas {
    cursor: pointer;
}

/************slider***************/

.slider {
    border-radius: 5px;   
    background-color: rgb(211, 211, 211, 0.7);
    -webkit-transition: .2s;
    transition: opacity .2s;
    cursor: pointer;
}

.slider::-webkit-slider-thumb {
    border-radius: 50%; 
    background: #404040;
    cursor: pointer;
}

/**IE**/
.slider::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 6px 0;
    color: transparent;
}

.slider::-ms-fill-lower {
    background: #ff0000;
    border-radius: 10px;
}

.slider::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}

.slider::-ms-thumb {
    border: none;
    border-radius: 50%;
    background: #404040;
}

.slider:focus::-ms-fill-lower {
    /*  background: #888; */
    background: #ff0000;
}

.slider:focus::-ms-fill-upper {
    background: #ccc;
}

/**FF**/
.slider::-moz-range-thumb {
    border-radius: none;
    background: #404040;
    cursor: pointer;
}

.slider::-moz-range-progress {
    background-color: #262626; 
}

.slider::-moz-range-track {  
    background-color: #262626;
}

  


/*****************PLAYLIST*************/
/**************************************/

.up-next {
    background: #000000;
    opacity: 0.5;
    color: #ffffff;
    text-shadow: 0px -1px 0px #000000;
    padding-left: 15px;
    font-size: 3vw;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .up-next {
        /* border-radius: 20px 20px 0px 0px; */
        font-size: 1.7vw;
    }
}

.up-next-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 30%;
    float: left;
}

@media only screen and (min-width: 768px) {
    .up-next-text {
        width: 100%;
        float: none;
    }
}

/***************scrool****************/

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #000000; 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    background:  #808080;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666666; 
}

/**********playlist controls**********/

.playlist-controls {
    background: #000000;
    opacity: 0.5;
    /* border-radius: 0px 0px 20px 20px; */
}

.show-on-sm {
    background: #000000;
    opacity: 0.5;
    color: #ffffff;
}


@media only screen and (min-width: 768px) {
    .playlist-button {
        -webkit-box-shadow: 0 0 10px #3d3d29;
        box-shadow: 0 0 10px #3d3d29;
    }
}

.btn-mix {
    /* border-bottom-left-radius: 20px; */
}

.btn-reply-all {
    /* border-bottom-right-radius: 20px; */
}

.fa-random, .fa-sync {
    color: #000000;
    background-color: #adad85;
    font-weight: bold;
    cursor: pointer;
    border: 4px solid #000000;
}

@media only screen and (min-width: 768px) {
    .fa-random, .fa-sync {
        border: none;
    }
}

.button-active {
    background-color: lime;
    -webkit-box-shadow: 0 0 10px  #ffff00;
    box-shadow: 0 0 10px  #ffff00;
    color: #006400;
    text-shadow:  0 0 10px  #ffff00;
}

/**************video info******************/

a {
    background-color: rgba(0,0,0,0.5);
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

a:hover img {
    opacity: 0.5;
}


@media only screen and (min-width: 768px) {
    a {
        background-color: none;
        border-top: none;
        border-bottom: none;
    }
}


.next-video-title, .next-video-author {
    color: #ffffff;
    font-size: 3.5vw;
    text-shadow: 0 0 10px #000000;
}

.next-video-author {
    font-size: 2.5vw;
}

@media only screen and (min-width: 768px) {
    .next-video-title, .next-video-author {  
        font-size: 2vw;
        font-weight: bold;
        text-align: center;
    }
}

@media only screen and (min-width: 768px) {
    .next-video-author {
        font-size: 1vw;
        font-weight: normal;
    }
}

script.js

var video, controls;
var topButtonPlay, topButtonPause;
var videoContainer;
var playlistControls = [];
var slider;

var videoList = [];

var btnRepeat, btnBackward, btnPause, btnPlay, btnForward, btnExpand; 

var previousVideo, nextVideoName;

var achors = [];

var randomBtnPress = false;
var repeatBtnPress = false;

// Find does browser is Internet Explorer 6-11 or Opera
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

window.onload = init;

function init(){


    video = document.getElementById("video");
    controls = document.getElementById("controls");
    videoContainer = document.getElementById("videoContainer");
    topButtonPlay = document.getElementById("topButtonPlay");
    topButtonPause = document.getElementById("topButtonPause");
    slider = document.getElementById("range");
    btnRepeat = document.getElementById("repeat-button");
    btnBackward = document.getElementById("backward-button");
    btnPause = document.getElementById("pause-button");
    btnPlay = document.getElementById("play-button");
    btnForward = document.getElementById("forward-button");
    btnExpand = document.getElementById("expand-button");

    showHideVideoControls();

    makeVideoControlsFitToPosterAndVideo();

    handlePlaylistButtonsFunction();

    handleSlider();

    handleVideoControls();

    makeVideoList();

    chooseVideoFromPlaylist();

    manageVideoEnd();
}

function makeVideoControlsFitToPosterAndVideo(){
    if(isOpera){
        videoContainer.style.background = "rgba(0,0,0,0.5)";
    } 
}

function manageVideoEnd(){
    video.addEventListener("ended", function(){
        if(!repeatBtnPress) {
            btnPause.style.display = "none";
            btnPlay.style.display = "block";
            slider.value = 0;
        }
        else {
            if(!randomBtnPress){
                FindNextVideo();
            }
            else {
                FindNextRandomVideo();
            }
        }
    });
}


function FindNextRandomVideo(){
    var index = Math.floor(Math.random() * videoList.length);
    PlayNextVideo(videoList[index]);
}

function chooseVideoFromPlaylist(){
    achors = document.getElementsByTagName("a");
    for(i = 0; i < achors.length; i++){
    achors[i].addEventListener("click", function(e) {
        e.preventDefault();
        var a;
        if((e.target.parentElement.nodeName == "DIV") && (e.target.parentElement.classList.contains("next-video-info"))){
        a = e.target.parentElement.parentElement;
        }
        else if(e.target.parentElement.nodeName == "A"){
            a = e.target.parentElement; 
        }
        else {
            a = e.target;
        }
        var index;
        for (var i = 0; i < achors.length; ++i) {
            if (achors[i] == a) {
                index = i;
                break;
            }
        }
        PlayNextVideo(videoList[index]);
    });
    };
}

function Video(number, src, poster){
    this.number = number;
    this.src = src;
    this.poster = poster;
}

function makeVideoList(){
    var allVideos = document.getElementsByTagName('a');
    for(i = 0; i < allVideos.length; i++){
        var number = allVideos[i].getAttribute("data-number");
        var src = allVideos[i].getAttribute("href");
        var img = allVideos[i].firstElementChild;
        var poster = img.getAttribute("src");
        var newVideo = new Video(number, src, poster);
        videoList.push(newVideo);
    }
}

function handleVideoControls(){
    btnRepeat.addEventListener("click", RepeatVideo);
    btnBackward.addEventListener("click", FindPreviousVideo);
    btnForward.addEventListener("click", FindNextVideo);
    btnPause.addEventListener("click", PlayPause);
    btnPlay.addEventListener("click", PlayPause);
    btnExpand.addEventListener("click", Expand);
}


function Expand(){
    if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      } else if (video.msRequestFullscreen) {
        video.msRequestFullscreen();}
}

function FindPreviousVideo(){
    if(randomBtnPress){
        FindNextRandomVideo();
        return;
    }
    var numb = video.getAttribute("data-number");
    if(numb == videoList[0].number){
        RepeatVideo();
    }
    else {
        var index = parseInt(numb) - 1;
        PlayNextVideo(videoList[index]);
    }

}

function FindNextVideo(){
    if(randomBtnPress){
        FindNextRandomVideo();
        return;
    }
    var numb = video.getAttribute("data-number");
    if(numb == videoList[videoList.length-1].number){
        PlayNextVideo(videoList[0]);
    }
    else {
        var index = parseInt(numb) + 1;
        PlayNextVideo(videoList[index]);
    }
}

function PlayNextVideo(newVideo){
    var newVideoElement = document.createElement("video");
    newVideoElement.id = "video";
    newVideoElement.src = newVideo.src;
    newVideoElement.poster = newVideo.poster;
    newVideoElement.setAttribute("data-number", newVideo.number);
    
    videoContainer.appendChild(newVideoElement);
    videoContainer.replaceChild(newVideoElement, video);
    video = document.getElementById("video");
    video.addEventListener("loadedmetadata", function(){
        video.currentTime = 0;
        slider.value = 0;
        handleSlider();
        showHideVideoControls();
        manageVideoEnd();
    });
    PlayPause();
}

function RepeatVideo() {
    video.currentTime = 0;
    video.play();
}

function handleSlider(){
    slider.addEventListener("change", function(){
        video.currentTime = video.duration * (slider.value / 100);
    });

    slider.addEventListener("mousedown", function(){
       // video.pause();
        video.removeEventListener("timeupdate", sliderTimeUpdate);
    });

    slider.addEventListener("mouseup", function(){
      //  video.play();
        video.addEventListener("timeupdate", sliderTimeUpdate);
    });


    video.addEventListener("timeupdate", sliderTimeUpdate)
}

function sliderTimeUpdate(){
    slider.value = (100 / video.duration) * video.currentTime;;
}

function handlePlaylistButtonsFunction(){
    playlistControls.push(document.getElementById("btn-random"));
    playlistControls.push(document.getElementById("btn-repeat-all"));
    playlistControls.push(document.getElementById("btn-random-sm"));
    playlistControls.push(document.getElementById("btn-repeat-all-sm"));
    playlistControls[0].addEventListener("click", randomPlaylist);
    playlistControls[1].addEventListener("click", repeatAll);
    playlistControls[2].addEventListener("click", randomPlaylist);
    playlistControls[3].addEventListener("click", repeatAll);

}

function randomPlaylist(evt){
    makeButtonActivOrNot(evt);
    randomBtnPress = true;
}

function repeatAll(evt){
    makeButtonActivOrNot(evt);
    repeatBtnPress = true;
}

function makeButtonActivOrNot(evt){
    if(evt.target.classList.contains("button-active")){
        evt.target.classList.remove("button-active");
    }
    else
    evt.target.classList.add("button-active");
}

function showHideVideoControls(){
    videoContainer.addEventListener("mouseover", showControls);
    videoContainer.addEventListener("mouseout", hideControls);
    video.addEventListener("click", PlayPause);
}

function PlayPause(){
    if(video.paused){
        video.play();
        btnPlay.style.display = "none";
        btnPause.style.display = "block";
        if(isIE){
            return;
        }
        topButtonPlay.classList.remove("hidden");
        setTimeout(function() {
            topButtonPlay.classList.add("hidden");
        }, 600);
    }
    else {
        video.pause();
        btnPlay.style.display = "block";
        btnPause.style.display = "none";
        if(isIE){
            return;
        }
        topButtonPause.classList.remove("hidden");
        setTimeout(function() {
            topButtonPause.classList.add("hidden");
        }, 600);
    }
}

function showControls(){
    controls.style.display = "block";
}

function hideControls() {
    controls.style.display = "none";
}

js-audiovideo-customvideoplayer-v4.markdown

Rendered
Source

JS.AudioVideo.CustomVideoPlayer.v4

A Pen by Pan Doul on CodePen.

License.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="styleM.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
        crossorigin="anonymous">
    <title>HTML5 Video Player</title>
</head>

<body>
    <div id="main-container" class="container">
        <div class="title">
            <strong>HTML5</strong> Video Player
        </div>
        <div id="videoContainer" class="video-container col-16-20">
            <video id="video" class="video" 
            src="https://mainline.i3s.unice.fr/mooc/week2p1/video1.mp4" 
            poster="https://mainline.i3s.unice.fr/mooc/week2p1/caminandes-1.jpg" data-number="0">
            </video>
            <i id="topButtonPlay" class="far fa-play-circle button-on-top hidden fa-7x"></i>
            <i id="topButtonPause" class="fas fa-pause-circle button-on-top hidden fa-7x"></i>
            <div id="controls" class="video-controls">
                <input id="range" class="slider" type="range" min="1" max="100" value="1" step="1"/>
                <div id="repeat-button" class="control-button">
                    <i class="fas fa-redo fa-1x fa-2x"></i>
                </div>
                <div id="backward-button" class="control-button">
                    <i class="fas fa-backward fa-2x"></i>
                </div>
                <div id="pause-button" class="control-button" style="display:none">
                    <i class="fas fa-pause fa-2x"></i>
                </div>
                <div id="play-button" class="control-button">
                    <i class="fas fa-play fa-2x"></i>
                </div>
                <div id="forward-button" class="control-button">
                    <i class="fas fa-forward fa-2x"></i>
                </div>
                <div id="expand-button" class="control-button">
                    <i class="fas fa-expand fa-2x"></i>
                </div>
            </div>
        </div>
        <div id="playlist" class="playlist col-4-16">
           <div class="up-next">
               <p class="up-next-text">Up next...</p>
               <div class="playlist-controls show-on-sm">
                    <div class="playlist-button"><i id="btn-random-sm" class="fas fa-random"></i></div>
                    <div class="playlist-button"><i id="btn-repeat-all-sm" class="fas fa-sync"></i></div>
                </div>
           </div>
           <div class="next-video-container">
                <a href="https://mainline.i3s.unice.fr/mooc/week2p1/video1.mp4" data-number="0">
                    <img src="https://mainline.i3s.unice.fr/mooc/week2p1/caminandes-1.jpg">
                    <div class="next-video-info">
                        <h2 class="next-video-title">Caminandes: First episode
                            <p class="next-video-author">By the Blender Foundation</p>
                        </h2>
                    </div>
                </a>
                <a href="https://mainline.i3s.unice.fr/mooc/week2p1/video2.mp4" data-number="1">
                    <img src="https://mainline.i3s.unice.fr/mooc/week2p1/caminandes-2.jpg">
                    <div class="next-video-info">
                        <h2 class="next-video-title">Caminandes: Llama Drama - Short Movie
                            <p class="next-video-author">By the Blender Foundation</p>
                        </h2>
                    </div>
                </a>
                <a href="https://mainline.i3s.unice.fr/mooc/week2p1/video3.mp4" class="" data-number="2">
                    <img src="https://mainline.i3s.unice.fr/mooc/week2p1/big-buck-bunny.jpg">
                    <div class="next-video-info">
                        <h2 class="next-video-title">Big Buck Bunny
                            <p class="next-video-author">By the Blender Foundation</p>
                        </h2>
                    </div>
                </a>
                <a href="https://mainline.i3s.unice.fr/mooc/week2p1/video4.mp4" data-number="3">
                    <img src="https://mainline.i3s.unice.fr/mooc/week2p1/sintel.jpg">
                    <div class="next-video-info">
                        <h2 class="next-video-title">Sintel
                            <p class="next-video-author">By the Blender Foundation</p>
                        </h2>
                    </div>
                </a>
                <a href="https://mainline.i3s.unice.fr/mooc/week2p1/video1.mp4" data-number="4">
                    <img src="https://mainline.i3s.unice.fr/mooc/week2p1/caminandes-1.jpg">
                    <div class="next-video-info">
                        <h2 class="next-video-title">Caminandes: First episode
                            <p class="next-video-author">By the Blender Foundation</p>
                        </h2>
                    </div>
                </a>
                <a href="https://mainline.i3s.unice.fr/mooc/week2p1/video2.mp4" data-number="5">
                    <img src="https://mainline.i3s.unice.fr/mooc/week2p1/caminandes-2.jpg">
                    <div class="next-video-info">
                        <h2 class="next-video-title">Caminandes: Llama Drama - Short Movie
                           <p class="next-video-author">By the Blender Foundation</p> 
                        </h2>
                    </div>
                </a>
                <a href="https://mainline.i3s.unice.fr/mooc/week2p1/video3.mp4" class="" data-number="6">
                    <img src="https://mainline.i3s.unice.fr/mooc/week2p1/big-buck-bunny.jpg">
                    <div class="next-video-info">
                        <h2 class="next-video-title">Big Buck Bunny
                            <p class="next-video-author">By the Blender Foundation</p>
                        </h2>                      
                    </div>
                </a>
                <a href="https://mainline.i3s.unice.fr/mooc/week2p1/video4.mp4" data-number="7">
                    <img src="https://mainline.i3s.unice.fr/mooc/week2p1/sintel.jpg">
                    <div class="next-video-info">
                        <h2 class="next-video-title">Sintel
                            <p class="next-video-author">By the Blender Foundation</p>
                        </h2>
                    </div>
                </a>
            </div>
        </div>
        <div class="playlist-controls hide-on-sm">
            <div class="playlist-button btn-mix"><i id="btn-random" class="fas fa-random"></i></div>
            <div class="playlist-button btn-reply-all"><i id="btn-repeat-all" class="fas fa-sync"></i></div>
        </div>
    </div>

        <script src="script.js"></script>
   
</body>
</html>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

JS.AudioVideo.CustomVideoPlayer.v4

JS.AudioVideo.CustomVideoPlayer.v4