Skip to content

Instantly share code, notes, and snippets.

@HeNy007

HeNy007/index.html

Created January 19, 2022 00:36
Show Gist options
  • Save HeNy007/cd9a3d13527b4e6122ffc657ee65271d to your computer and use it in GitHub Desktop.
Save HeNy007/cd9a3d13527b4e6122ffc657ee65271d to your computer and use it in GitHub Desktop.
Download ZIP
PJVrdB
Raw
index.html
<div id="previewPlayer"></div>
<div id="slider"></div>
<p>After changing start and stop times on the slider, reload <button onclick="javascript:location.reload()">&#8635;</button> the page to see those start and stop times reflected in each of the five spots in the playlist.</p>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://app.extremereach.com/Content/js/jwplayer-7.12.8/jwplayer.js"></script>
<script> jwplayer.key = "+dQxixMPdR7e+iUQLHVm0Q2p9oVpzNhmbHu++8aB+YhHEkhW"; </script>
Raw
script.js
var starttime = localStorage.getItem("starttime");
if (starttime === null) {
starttime = 2.5;
}
console.log("starttime: "+starttime);
var stoptime = localStorage.getItem("stoptime");
if (stoptime === null) {
stoptime = 15.5;
}
console.log("stoptime: "+stoptime);
jwplayer('previewPlayer').setup({
"playlist": [{
"sources": [{
"file": "https://app.extremereach.com/Media/Stream/0753C06E-BD36-4324-BBA8-CD9B2CC9B626?profile=870B1D61-D3C5-4005-8E4C-8AF08C6711E7&useCDN=false",
"type": "mp4",
label: '360p'
},{
"file": "https://app.extremereach.com/Media/Stream/0753C06E-BD36-4324-BBA8-CD9B2CC9B626?profile=6770839A-128E-4C84-812B-3F562CFBFC4B&useCDN=false",
"type": "mp4",
label: '720p'
},{
"file": "https://app.extremereach.com/Media/Stream/0753C06E-BD36-4324-BBA8-CD9B2CC9B626?profile=745F498D-4F9A-4312-9310-3029C1C9583C&useCDN=false",
"type": "mp4",
label: '1080p'
}],
"title": "Angel - Adidas",
"starttime":starttime,
"stoptime":stoptime
},{
"sources": [{
"file": "https://app.extremereach.com/Media/Stream/9A42F1D7-E2CE-458C-A477-08D7549CF8DE?profile=870B1D61-D3C5-4005-8E4C-8AF08C6711E7&useCDN=false",
"type": "mp4",
label: '360p'
},{
"file": "https://app.extremereach.com/Media/Stream/9A42F1D7-E2CE-458C-A477-08D7549CF8DE?profile=6770839A-128E-4C84-812B-3F562CFBFC4B&useCDN=false",
"type": "mp4",
label: '720p'
},{
"file": "https://app.extremereach.com/Media/Stream/9A42F1D7-E2CE-458C-A477-08D7549CF8DE?profile=745F498D-4F9A-4312-9310-3029C1C9583C&useCDN=false",
"type": "mp4",
label: '1080p'
}],
"title": "Jay - Adidas",
"starttime":starttime,
"stoptime":stoptime
},{
"sources": [{
"file": "https://app.extremereach.com/Media/Stream/19787D0E-0BFA-4308-BDDE-98487E7C4323?profile=870B1D61-D3C5-4005-8E4C-8AF08C6711E7&useCDN=false",
"type": "mp4",
label: '360p'
},{
"file": "https://app.extremereach.com/Media/Stream/19787D0E-0BFA-4308-BDDE-98487E7C4323?profile=6770839A-128E-4C84-812B-3F562CFBFC4B&useCDN=false",
"type": "mp4",
label: '720p'
},{
"file": "https://app.extremereach.com/Media/Stream/19787D0E-0BFA-4308-BDDE-98487E7C4323?profile=745F498D-4F9A-4312-9310-3029C1C9583C&useCDN=false",
"type": "mp4",
label: '1080p'
}],
"title": "Danny - Adidas",
"starttime":starttime,
"stoptime":stoptime
},{
"sources": [{
"file": "https://app.extremereach.com/Media/Stream/C6300F24-5E49-4568-9D11-8798A836C34C?profile=870B1D61-D3C5-4005-8E4C-8AF08C6711E7&useCDN=false",
"type": "mp4",
label: '360p'
},{
"file": "https://app.extremereach.com/Media/Stream/C6300F24-5E49-4568-9D11-8798A836C34C?profile=6770839A-128E-4C84-812B-3F562CFBFC4B&useCDN=false",
"type": "mp4",
label: '720p'
},{
"file": "https://app.extremereach.com/Media/Stream/C6300F24-5E49-4568-9D11-8798A836C34C?profile=745F498D-4F9A-4312-9310-3029C1C9583C&useCDN=false",
"type": "mp4",
label: '1080p'
}],
"title": "Tiff - Adidas",
"starttime":starttime,
"stoptime":stoptime
}],
nextupoffset: -1,
skin: 'vapor',
abouttext: 'About Extreme Reach',
aboutlink: 'https://www.extremereach.com',
playbackRateControls: [0.25, 0.5, 1, 1.5, 2, 3, 4],
width: '640',
height: '360',
bufferlength: 10,
primary: 'html5',
autostart: true,
stretching: 'uniform',
aspectratio: '16:9',
//visualplaylist: false
});
jwplayer('previewPlayer').on('firstFrame', function() {
jwplayer('previewPlayer').seek(
jwplayer('previewPlayer').getPlaylistItem().starttime
)
});
jwplayer('previewPlayer').on('time', function(event) {
var stop = jwplayer('previewPlayer').getPlaylistItem().stoptime;
if (stop != null && event.position > stop) {
jwplayer('previewPlayer').next();
}
});
function collision($div1, $div2) {
var x1 = $div1.offset().left;
var w1 = 40;
var r1 = x1 + w1;
var x2 = $div2.offset().left;
var w2 = 40;
var r2 = x2 + w2;
if (r1 < x2 || x1 > r2) return false;
return true;
}
// // slider call
$('#slider').slider({
range: true,
min: 0,
max: 15,
//max: jwplayer('previewPlayer').getPlaylistItem().getDuration();
step: 0.1,
values: [ starttime, stoptime ],
slide: function(event, ui) {
console.log("adjustment");
$('.ui-slider-handle:eq(0) .time-range-min').html(':' + ui.values[ 0 ]);
$('.ui-slider-handle:eq(1) .time-range-max').html(':' + ui.values[ 1 ]);
$('.time-range-both').html('<i>:' + ui.values[ 0 ] + ' - </i>:' + ui.values[ 1 ] );
localStorage.setItem("starttime",ui.values[ 0 ]);
localStorage.setItem("stoptime",ui.values[ 1 ]);
// jwplayer('previewPlayer').getPlaylistItem().startime(ui.values[ 0 ]);
// jwplayer('previewPlayer').getPlaylistItem().stoptime(ui.values[ 1 ]);
if ( ui.values[0] == ui.values[1] ) {
$('.time-range-both i').css('display', 'none');
} else {
$('.time-range-both i').css('display', 'inline');
}
//
if (collision($('.time-range-min'), $('.time-range-max')) == true) {
$('.time-range-min, .time-range-max').css('opacity', '0');
$('.time-range-both').css('display', 'block');
} else {
$('.time-range-min, .time-range-max').css('opacity', '1');
$('.time-range-both').css('display', 'none');
}
}
});
$('.ui-slider-range').append('<span class="time-range-both value"><i>:' + $('#slider').slider('values', 0 ) + ' - </i>' + $('#slider').slider('values', 1 ) + '</span>');
$('.ui-slider-handle:eq(0)').append('<span class="time-range-min value">:' + $('#slider').slider('values', 0 ) + '</span>');
$('.ui-slider-handle:eq(1)').append('<span class="time-range-max value">:' + $('#slider').slider('values', 1 ) + '</span>');
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body {
padding: 40px 0 0 0;
font-family:Arial, Helvetica, sans-serif;
}
.videos-hidden {
height:0;
}
#previewPlayer {
min-height:200px;
margin:0 auto;
margin-bottom:40px;
}
#slider {
margin:0 10px;
}
.value {
position: absolute;
top: 30px;
left: 50%;
margin: 0 0 0 -20px;
width: 40px;
text-align: center;
display: block;
/* optional */
font-weight: normal;
font-family: Verdana,Arial,sans-serif;
font-size: 14px;
color: #333;
}
.time-range-both.value {
width: 100px;
margin: 0 0 0 -50px;
top: 26px;
}
.time-range-both {
display: none;
}
.value i {
font-style: normal;
}
p {
padding-top:20px;
text-align:center;
}
.jw-title, .jw-nextup {
display:none!important;
}
/*.jw-display {
transition: opacity 10s ease!important, visibility 10s ease!important;
}*/
/*.jw-controls-right, .jw-display, .jw-dock, .jw-overlay, .jw-plugin-sharing {
-webkit-transition: opacity 10s ease!important, visibility 10s ease!important;
transition: opacity 10s ease!important, visibility 10s ease!important;
}
.jw-flag-user-inactive .jw-controlbar,.jw-flag-user-inactive.jw-state-buffering:not(.jw-flag-media-audio):not(.jw-flag-audio-player):not(.jw-flag-ads-vpaid-controls):not(.jw-flag-casting) .jw-controlbar,.jw-flag-user-inactive.jw-state-playing:not(.jw-flag-media-audio):not(.jw-flag-audio-player):not(.jw-flag-ads-vpaid-controls):not(.jw-flag-casting) .jw-controlbar{
-webkit-transition: opacity 10s ease!important, visibility 10s ease!important;
transition: opacity 10s ease!important, visibility 10s ease!important;
}*/
/*.jw-controlbar {
opacity:1!important;
visibility: visible!important;
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment