Skip to content

player
player
Verified Commit a19aae7d authored by Dominique Feyer's avatar Dominique Feyer
Browse files
Options

TASK: Add preview page for player testings

parent ec3c5bf5
Pipeline #1475 passed with stage
    in 1 minute and 44 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 166 additions and 8 deletions
    Dockerfile
    View file @ a19aae7d
    ......@@ -128,6 +128,7 @@ RUN GPG_KEYS=B0F4253373F8F6F510D42178520A9993A1C052F8 \
    COPY docker/nginx.conf /etc/nginx/nginx.conf
    COPY docker/default.conf /etc/nginx/conf.d/default.conf
    COPY docker/data /data
    COPY sandbox /sandbox
    COPY dist/* /data/
    EXPOSE 80
    ......
    docker/data/preview.html 0 → 100644
    View file @ a19aae7d
    <!DOCTYPE html>
    <html>
    <head>
    <title>medialib.tv video player - preview sandbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3">
    <!-- STYLES -->
    <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto:700');
    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-family: "Roboto";
    max-width:1000px;
    margin: 0 auto;
    padding:0 50px 50px;
    }
    .header {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    }
    a {
    color: #00B8D4;
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    }
    .header svg {
    width: 120px !important;
    }
    svg {
    width: 30vw;
    height: auto;
    }
    .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    }
    .help-links {
    margin-top: 1rem;
    }
    .help-link {
    font-size: 18px;
    color: rgb(0, 184, 212);
    text-decoration: none;
    }
    </style>
    <!-- SCRIPTS -->
    <script type="text/javascript" src="https://player.medialib.tv/player.full.min.js"></script>
    </head>
    <body>
    <header class="header">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 462 462">
    <g fill="none" fill-rule="evenodd">
    <path fill="#00B8D4" d="M0 0h462v462H0z"/>
    <path fill="#FFF" d="M33.484 299v-25.74h9.792c7.056 0 10.332 3.132 10.332 8.604v.144c0 5.4-3.636 8.316-10.008 8.316h-2.772V299h-7.344zm7.344-13.716h2.124c2.376 0 3.636-1.116 3.636-3.24v-.144c0-2.196-1.296-3.096-3.6-3.096h-2.16v6.48zM56.956 299h17.136v-5.724h-9.72V273.26h-7.416V299zm18.864 0l8.244-25.74h9.54l8.172 25.74h-7.812l-1.368-4.788h-8.532L82.696 299H75.82zm12.528-19.764l-2.844 9.9h5.652l-2.808-9.9zM107.86 299v-11.016l-8.388-14.724h8.028l4.356 8.676 4.356-8.676h7.056l-7.992 14.724V299h-7.416zm18.18 0h18.36v-5.688h-11.016v-4.68h8.316v-5.256h-8.316v-4.428h10.44v-5.688H126.04V299zm22.032 0v-25.74h10.08c6.732 0 10.476 2.736 10.476 8.172v.144c0 3.672-1.944 5.724-4.644 6.768L170.14 299h-7.776l-5.22-9.216h-1.728V299h-7.344zm7.344-14.004h2.376c2.484 0 3.708-1.044 3.708-3.132v-.144c0-2.088-1.296-2.916-3.672-2.916h-2.412v6.192zm-67.154-63.85c6.072 0 7.994 5.26 7.994 11.84v25.5h15.28V230.25c0-12.648-6.173-23.172-21.25-23.172-7.79 0-13.256 3.238-16.19 6.173-3.542-3.842-8.4-6.17-14.37-6.17-4.25 0-8.6 1.518-11.534 3.845v-3.035h-15.28v50.593h15.28v-33.29c2.023-2.53 5.06-4.05 8.398-4.05 6.072 0 7.994 5.263 7.994 11.84v25.5h15.28V230.25c0-1.62-.203-3.136-.405-4.654 2.02-2.732 5.36-4.453 8.8-4.453zm58.386 24.184c5.363 0 8.804-2.63 10.828-6.375l12.142 8.196c-4.654 7.29-12.85 12.147-22.868 12.147-13.357 0-25.804-10.524-25.804-26.107 0-14.876 10.524-26.108 26.107-26.108 12.85 0 24.387 8.4 24.387 24.388 0 1.416-.1 2.934-.304 4.452H135.62c.707 6.78 6.475 9.41 11.028 9.41zm-.506-26.006c-3.642 0-9.005 1.62-10.422 7.69h20.643c-.81-5.363-5.262-7.69-10.22-7.69zm32.18 13.863c0-13.863 9.51-26.107 24.486-26.107 4.15 0 8.197 1.417 11.13 3.845V186.64h15.28v71.844h-15.28v-2.934c-2.933 2.428-6.98 3.744-11.13 3.744-14.976 0-24.487-12.244-24.487-26.107zm27.016 12.143c3.744 0 6.476-1.417 8.6-4.15v-15.886c-2.124-2.732-4.856-4.25-8.6-4.25-7.286 0-11.637 5.464-11.637 12.143 0 6.678 4.355 12.143 11.64 12.143zm35.416 13.154h15.38V207.89h-15.38v50.594zm0-56.92h15.38V186.69h-15.38v14.876zm114.158-.05h15.38V186.64h-15.38v14.875zm-89.164 31.673c0-13.863 9.512-26.107 24.488-26.107 4.148 0 8.196 1.417 11.13 3.845v-3.035h15.28v50.594h-15.28v-2.934c-2.934 2.428-6.982 3.744-11.13 3.744-14.976 0-24.488-12.244-24.488-26.107zm27.017 12.143c3.744 0 6.476-1.417 8.6-4.15v-15.886c-2.124-2.732-4.856-4.25-8.6-4.25-7.285 0-11.636 5.464-11.636 12.143 0 6.678 4.35 12.143 11.632 12.143zm33.415 39.31h20v-120h-20v120zm28.732-26.406h15.38V207.64h-15.38v50.594zm76-25.047c0 13.863-9.512 26.107-24.488 26.107-4.148 0-8.196-1.316-11.13-3.744v2.934h-15.28V186.64h15.28v24.285c2.934-2.428 6.982-3.845 11.13-3.845 14.976 0 24.488 12.244 24.488 26.107zm-25.017 12.143c7.285 0 11.636-5.465 11.636-12.143 0-6.68-4.35-12.143-11.632-12.143-3.744 0-6.578 1.518-8.602 4.25v15.887c2.024 2.736 4.858 4.15 8.602 4.15z"/>
    </g>
    </svg>
    <div class="help-links">
    medialib.tv video player - preview sandbox
    </div>
    </header>
    <main class="main">
    <!-- YOUTUBE TEST -->
    <h2>Youtube video</h2>
    <video id="video1" class="player" width="1920" height="1080" data-youtube-id="YE7VzlLtp-4" data-skin="dark" poster="/sandbox/video/snapshots/player_local.jpg"></video>
    <!-- VIMEO TEST -->
    <h2>Vimeo video</h2>
    <video id="video-vimeo" class="player" width="1920" height="1080" data-vimeo-id="1084537" poster="/sandbox/video/snapshots/player_local.jpg"> </video>
    <!-- HLS TEST -->
    <h2>HLS stream</h2>
    <video id="video-hsl" class="player" width="1920" height="1080" poster="/sandbox/video/snapshots/player_local.jpg" preload="none">
    <source type="application/x-mpegURL" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" />
    </video>
    <!-- LOCAL TEST -->
    <h2>Local video, single source, with poster and bound play event</h2>
    <video id="video2" class="player" width="1920" height="1080" poster="/sandbox/video/snapshots/player_local.jpg" preload="none" src="/sandbox/video/mp4/sintel_trailer-1080p.mp4"></video>
    <!-- LOCAL TEST -->
    <h2>Local video with poster and resolution test, dark skin</h2>
    <video id="video-subtitles" class="sublime" width="640" height="360" poster="/sandbox/video/snapshots/player_local.jpg" data-volume="0.7" data-skin="dark">
    <source src="/sandbox/video/mp4/sintel_trailer-1080p.mp4" type="video/mp4" data-quality="hd" />
    <source src="/sandbox/video/mp4/sintel_trailer-480p.mp4" type="video/mp4"/>
    <source src="/sandbox/video/webm/sintel_trailer-1080p.webm" type="video/webm" data-quality="hd" />
    <source src="/sandbox/video/webm/sintel_trailer-480p.webm" type="video/webm" />
    </video>
    <!-- LIGHTBOX TEST -->
    <!-- LOCAL TEST -->
    <h2>Local video with poster opened in lightbox</h2>
    <a href="#video3" class="player">Open the lightbox</a>
    <video id="video3" data-skin="dark" width="640" height="360" poster="/sandbox/video/snapshots/player_local.jpg" data-skin="dark">
    <source src="/sandbox/video/mp4/sintel_trailer-480p.mp4" type="video/mp4" />
    <source src="/sandbox/video/mp4/sintel_trailer-1080p.mp4" type="video/mp4" data-quality="hd" />
    <source src="/sandbox/video/webm/sintel_trailer-480p.webm" type="video/webm" />
    <source src="/sandbox/video/webm/sintel_trailer-1080p.webm" type="video/webm" data-quality="hd" />
    </video>
    <!-- LOCAL TEST -->
    <h2>Youtube opened in lightbox</h2>
    <a href="#video4" class="player">Open the lightbox</a>
    <video id="video4" width="1920" height="1080" data-youtube-id="YE7VzlLtp-4" data-skin="dark" ></video>
    <!-- LOCAL TEST -->
    <h2>Vimeo opened in lightbox</h2>
    <a href="#videovimeol" class="player">Open the lightbox</a>
    <video id="videovimeol" width="1920" height="1080" data-vimeo-id="1084537" data-skin="dark" ></video>
    <script>
    var events = ['play', 'paused', 'ended', 'volume-changed', 'ready', 'lightbox-launched', 'lightbox-closed', 'fullscreen-entered', 'fullscreen-left', 'fullscreen-changed'];
    for (var i = 0; i < events.length; i++) {
    var eventname = events[i];
    console.log('Binding ' + eventname);
    player.on('video2',eventname,function(e){
    console.log('EVENT video2: ' + e.type);
    });
    player.on('video3',eventname,function(e){
    console.log('EVENT video3 (LB): ' + e.type);
    });
    player.on('video1',eventname,function(e){
    console.log('EVENT video1 (YT): ' + e.type);
    });
    player.on('video-vimeo',eventname,function(e){
    console.log('EVENT video1 (YT): ' + e.type);
    });
    player.on('videovimeol',eventname,function(e){
    console.log('EVENT video1 (YT): ' + e.type);
    });
    }
    </script>
    </main>
    </body>
    </html>
    src/less/skins/player-default.less
    View file @ a19aae7d
    ......@@ -1294,22 +1294,22 @@
    /* Poster Styles */
    .vjs-poster {
    /* Cross browser opacity */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    .transition(all 0.2s);
    }
    &:hover .vjs-poster{
    /* Cross browser opacity */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    }
    &:hover .vjs-poster{
    /* Cross browser opacity */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    }
    // make youtube player fullscreen
    &.vjs-youtube > div:first-child{
    ......
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment