Add timeDisplay to player

This commit is contained in:
Omar Roth 2018-08-05 08:58:03 -05:00
parent d75d34abdd
commit 06af43c95e
3 changed files with 43 additions and 31 deletions

View file

@ -179,3 +179,9 @@ div {
.video-js:hover .vjs-big-play-button {
background-color: rgba(35, 35, 35, 0.75);
}
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration {
display: block;
}

View file

@ -63,20 +63,23 @@ video, #my_video, .video-js, .vjs-default-skin
<script>
var options = {
preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2],
controlBar: {
children: [
'playToggle',
'volumePanel',
'progressControl',
'remainingTimeDisplay',
'captionsButton',
'qualitySelector',
'playbackRateMenuButton',
'fullscreenToggle',
],
},
preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2],
controlBar: {
children: [
'playToggle',
'volumePanel',
'currentTimeDisplay',
'timeDivider',
'durationDisplay',
'progressControl',
'remainingTimeDisplay',
'captionsButton',
'qualitySelector',
'playbackRateMenuButton',
'fullscreenToggle'
]
}
};
var shareOptions = {
@ -87,7 +90,7 @@ var shareOptions = {
description: "<%= description %>",
image: '<%= thumbnail %>',
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
};
var player = videojs('player', options, function() {

View file

@ -71,21 +71,24 @@
<script>
var options = {
aspectRatio: '16:9',
preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2],
controlBar: {
children: [
'playToggle',
'volumePanel',
'progressControl',
'remainingTimeDisplay',
'captionsButton',
'qualitySelector',
'playbackRateMenuButton',
'fullscreenToggle',
],
},
aspectRatio: '16:9',
preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2],
controlBar: {
children: [
'playToggle',
'volumePanel',
'currentTimeDisplay',
'timeDivider',
'durationDisplay',
'progressControl',
'remainingTimeDisplay',
'captionsButton',
'qualitySelector',
'playbackRateMenuButton',
'fullscreenToggle'
]
}
};
var shareOptions = {
@ -96,7 +99,7 @@ var shareOptions = {
description: "<%= description %>",
image: '<%= thumbnail %>',
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
};
var player = videojs('player', options, function() {