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 { .video-js:hover .vjs-big-play-button {
background-color: rgba(35, 35, 35, 0.75); 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> <script>
var options = { var options = {
preload: 'auto', preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2], playbackRates: [0.5, 1, 1.5, 2],
controlBar: { controlBar: {
children: [ children: [
'playToggle', 'playToggle',
'volumePanel', 'volumePanel',
'progressControl', 'currentTimeDisplay',
'remainingTimeDisplay', 'timeDivider',
'captionsButton', 'durationDisplay',
'qualitySelector', 'progressControl',
'playbackRateMenuButton', 'remainingTimeDisplay',
'fullscreenToggle', 'captionsButton',
], 'qualitySelector',
}, 'playbackRateMenuButton',
'fullscreenToggle'
]
}
}; };
var shareOptions = { var shareOptions = {
@ -87,7 +90,7 @@ var shareOptions = {
description: "<%= description %>", description: "<%= description %>",
image: '<%= thumbnail %>', image: '<%= thumbnail %>',
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360' 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() { var player = videojs('player', options, function() {

View file

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