Created
April 24, 2019 13:16
-
-
Save janpauldahlke/cd8855309c8d0df7d7dcdb7d91d1f5de to your computer and use it in GitHub Desktop.
nettrekt player
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> | |
| <title>4.5.1. mit Empfehlung</title> | |
| <style> | |
| .ardplayer-recos-clip-img-container { | |
| height: calc(200px / 16*9); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="stage"> | |
| <div id="player_target"></div> | |
| </div> | |
| <script type="text/javascript" src="../dist/ardplayer-example.js"></script> | |
| <link href="../dist/ardplayer-example.css" media="all" rel="stylesheet"/> | |
| <link href="./player.css" rel="stylesheet" /> | |
| <script> | |
| const workingURL = 'http://irt-a.akamaihd.net/irt_avstandard_2014/MP4/480x270p25/V-480x270p25_2bar_2ch_libx264_baseline_yuv420p_gop50_bit256k_max256k_buf512k_A1-64k_libfdk_lc_48k_2ch_eng_term1-2-2-7-1.mp4'; | |
| const chapters = { | |
| "_chapterArray": [ | |
| { | |
| "_chapterTime": 0, | |
| "_chapterTitle": "Start des Videos", | |
| "_chapterImg": "https://i.imgur.com/bPr0qKT.jpg" | |
| }, | |
| { | |
| "_chapterTime": 60, | |
| "_chapterTitle": "Kapitel 1: 1 Minuten", | |
| "_chapterImg": "https://i.imgur.com/qscIITF.jpg" | |
| }, | |
| { | |
| "_chapterTime": 360, | |
| "_chapterTitle": "Kapitel 2: 6 Minuten", | |
| "_chapterImg": "https://placehold.it/320x180" | |
| }, | |
| { | |
| "_chapterTime": 420, | |
| "_chapterTitle": "Kapitel 3: 7 Minuten", | |
| "_chapterImg": "https://placehold.it/320x180" | |
| } | |
| ] | |
| } | |
| const mc = { | |
| "__title" : "build a player", | |
| "_type" : "video", | |
| "_isLive" : "false", | |
| "_dvrEnabled" : "false", | |
| "_geoblocked" : "false", | |
| "_duration": 900, | |
| "_defaultQuality": ["auto", 0, 1, 2, 3], | |
| "_previewImage": "https://i.imgur.com/f7CihY0.jpg", | |
| "_mediaArray": [ | |
| { | |
| "_plugin": 1, | |
| "_mediaStreamArray": [ | |
| { | |
| "_quality": 0, | |
| "_stream": workingURL, | |
| "_label": "low", | |
| "_cdn": "" | |
| }, | |
| { | |
| "_quality": 1, | |
| "_stream": workingURL, | |
| "_label": "high", | |
| "_cdn": "" | |
| } | |
| ] | |
| }, | |
| { | |
| "_plugin": 0, | |
| "_mediaStreamArray": [] | |
| }, | |
| ], | |
| "_chapters": chapters | |
| } | |
| const pc = { | |
| "_autoplay": false, | |
| "_baseUrl": "../dist/", | |
| "_showSubtitelAtStart": false, | |
| } | |
| const player = new ardplayer.Player('player_target', pc, mc); | |
| </script> | |
| </body> | |
| </html> |
body {
font-family: Arial;
margin: 0;
padding: 0;
}
.stage {
width: 80vw;
margin-top: 10vh;
margin-left: auto;
margin-right: auto;
height: calc(80vw / 16 * 9);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.75);
display: block;
margin-bottom: 50px;
}
/**
go find why we hve to do this!
this is the easy wy, but it prevents plugin functionality
/
/ .ardplayer-controlbar {
display: initial !important;
} */
@media screen and (max-width: 800px) {
.stage {
width: 100vw;
height: calc(100vw / 16 * 9);
margin-left: 0;
margin-right: 0;
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
"_chaptersEnabled": true