Skin videojs
intelligid
Bonjour,
Voila je veux faire un skin genre youtube pour videoJs et j'ai téléchargé celui de videoJs SKin Generator. J'utilise VueJs avec Webpack.
Ce que je fais
<template>
<video id="video" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'>
<source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480'/>
<source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/>
<source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/>
<source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/>
<slot></slot>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<!-- <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<slot></slot>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video> -->
</template>
<style>
.video-js .vjs-menu-button-inline.vjs-slider-active, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline:hover, .video-js.vjs-no-flex .vjs-menu-button-inline {
width: 10em
}
.video-js .vjs-controls-disabled .vjs-big-play-button {
display: none !important
}
.video-js .vjs-control {
width: 3em
}
.video-js .vjs-menu-button-inline:before {
width: 1.5em
}
.vjs-menu-button-inline .vjs-menu {
left: 3em
}
.video-js.vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
display: block
}
.video-js .vjs-load-progress div, .vjs-seeking .vjs-big-play-button, .vjs-waiting .vjs-big-play-button {
display: none !important
}
.video-js .vjs-mouse-display:after, .video-js .vjs-play-progress:after {
padding: 0 .4em .3em
}
.video-js.vjs-ended .vjs-loading-spinner {
display: none
}
.video-js.vjs-ended .vjs-big-play-button {
display: block !important
}
.video-js *, .video-js:after, .video-js:before {
box-sizing: inherit;
font-size: inherit;
color: inherit;
line-height: inherit
}
.video-js.vjs-fullscreen, .video-js.vjs-fullscreen .vjs-tech {
width: 100% !important;
height: 100% !important
}
.video-js {
font-size: 14px;
overflow: hidden
}
.video-js .vjs-control {
color: inherit
}
.video-js .vjs-menu-button-inline:hover, .video-js.vjs-no-flex .vjs-menu-button-inline {
width: 8.35em
}
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content {
height: 3em;
width: 6.35em
}
.video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before {
text-shadow: 0 0 1em #fff, 0 0 1em #fff, 0 0 1em #fff
}
.video-js .vjs-spacer, .video-js .vjs-time-control {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
.video-js .vjs-time-control {
-webkit-box-flex: 0 1 auto;
-moz-box-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: auto
}
.video-js .vjs-time-control.vjs-time-divider {
width: 14px
}
.video-js .vjs-time-control.vjs-time-divider div {
width: 100%;
text-align: center
}
.video-js .vjs-time-control.vjs-current-time {
margin-left: 1em
}
.video-js .vjs-time-control .vjs-current-time-display, .video-js .vjs-time-control .vjs-duration-display {
width: 100%
}
.video-js .vjs-time-control .vjs-current-time-display {
text-align: right
}
.video-js .vjs-time-control .vjs-duration-display {
text-align: left
}
.video-js .vjs-play-progress:before, .video-js .vjs-progress-control .vjs-play-progress:before, .video-js .vjs-remaining-time, .video-js .vjs-volume-level:after, .video-js .vjs-volume-level:before, .video-js.vjs-live .vjs-time-control.vjs-current-time, .video-js.vjs-live .vjs-time-control.vjs-duration, .video-js.vjs-live .vjs-time-control.vjs-time-divider, .video-js.vjs-no-flex .vjs-time-control.vjs-remaining-time {
display: none
}
.video-js.vjs-no-flex .vjs-time-control {
display: table-cell;
width: 4em
}
.video-js .vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: .5em;
top: -.5em
}
.video-js .vjs-progress-control .vjs-load-progress, .video-js .vjs-progress-control .vjs-play-progress, .video-js .vjs-progress-control .vjs-progress-holder {
height: 100%
}
.video-js .vjs-progress-control .vjs-progress-holder {
margin: 0
}
.video-js .vjs-progress-control:hover {
height: 1.5em;
top: -1.5em
}
.video-js .vjs-control-bar {
-webkit-transition: -webkit-transform .1s ease 0s;
-moz-transition: -moz-transform .1s ease 0s;
-ms-transition: -ms-transform .1s ease 0s;
-o-transition: -o-transform .1s ease 0s;
transition: transform .1s ease 0s
}
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
visibility: visible;
opacity: 1;
-webkit-backface-visibility: hidden;
-webkit-transform: translateY(3em);
-moz-transform: translateY(3em);
-ms-transform: translateY(3em);
-o-transform: translateY(3em);
transform: translateY(3em);
-webkit-transition: -webkit-transform 1s ease 0s;
-moz-transition: -moz-transform 1s ease 0s;
-ms-transition: -ms-transform 1s ease 0s;
-o-transition: -o-transform 1s ease 0s;
transition: transform 1s ease 0s
}
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control {
height: .25em;
top: -.25em;
pointer-events: none;
-webkit-transition: height 1s, top 1s;
-moz-transition: height 1s, top 1s;
-ms-transition: height 1s, top 1s;
-o-transition: height 1s, top 1s;
transition: height 1s, top 1s
}
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control {
opacity: 0;
-webkit-transition: opacity 1s ease 1s;
-moz-transition: opacity 1s ease 1s;
-ms-transition: opacity 1s ease 1s;
-o-transition: opacity 1s ease 1s;
transition: opacity 1s ease 1s
}
.video-js.vjs-live .vjs-live-control {
margin-left: 1em
}
.video-js .vjs-big-play-button {
top: 50%;
left: 50%;
margin-left: -1em;
width: 2em;
border: none;
color: #fff;
-webkit-transition: border-color .4s, outline .4s, background-color .4s;
-moz-transition: border-color .4s, outline .4s, background-color .4s;
-ms-transition: border-color .4s, outline .4s, background-color .4s;
-o-transition: border-color .4s, outline .4s, background-color .4s;
transition: border-color .4s, outline .4s, background-color .4s;
background-color: rgba(0, 0, 0, .5);
font-size: 2.5em;
border-radius: 20%;
height: 1.4em !important;
line-height: 1.4em !important;
margin-top: -.7em !important
}
.video-js .vjs-menu-button-popup .vjs-menu {
left: -3em
}
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: transparent;
width: 12em;
left: -1.5em;
padding-bottom: .5em
}
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item, .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
background-color: #151b17;
margin: .3em 0;
padding: .5em;
border-radius: .3em
}
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
background-color: #2483d5
}
.video-js .vjs-big-play-button:active, .video-js .vjs-big-play-button:focus, .video-js:hover .vjs-big-play-button {
background-color: #cc181e
}
.video-js .vjs-loading-spinner {
border-color: #cc181e
}
.video-js .vjs-control-bar2 {
background-color: #000
}
.video-js .vjs-control-bar {
background-color: rgba(0, 0, 0, .3) !important;
color: #fff;
font-size: 12px
}
.video-js .vjs-play-progress, .video-js .vjs-volume-level {
background-color: #cc181e
}
.video-js .vjs-load-progress {
background: rgba(255, 255, 255, .3)
}
</style>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-resolution-switcher'
import 'videojs-resolution-switcher/lib/videojs-resolution-switcher.css'
// import 'videojs-select-subtitle'
// import 'videojs-ass'
// import 'videojs-contrib-hls'
// import 'videojs-qualityselector'
// import 'videojs-contextmenu'
// import 'videojs-contextmenu-ui'
// import 'videojs-contextmenu-ui/dist/videojs-contextmenu-ui.css'
// import 'videojs-framebyframe'
// import 'videojs-errors'
// import 'videojs-errors/dist/videojs-errors.css'
videojs.addLanguage('fr', {
'Play': 'Lecture',
'Pause': 'Pause',
'Current Time': 'Temps actuel',
'Duration Time': 'Durée',
'Remaining Time': 'Temps restant',
'Stream Type': 'Type de flux',
'LIVE': 'EN DIRECT',
'Loaded': 'Chargé',
'Progress': 'Progression',
'Fullscreen': 'Plein écran',
'Non-Fullscreen': 'Fenêtré',
'Mute': 'Sourdine',
'Unmute': 'Son activé',
'Playback Rate': 'Vitesse de lecture',
'Subtitles': 'Sous-titres',
'subtitles off': 'Sous-titres désactivés',
'Captions': 'Sous-titres',
'captions off': 'Sous-titres désactivés',
'Chapters': 'Chapitres',
'You aborted the media playback': 'Vous avez interrompu la lecture de la vidéo.',
'A network error caused the media download to fail part-way.': 'Une erreur de réseau a interrompu le téléchargement de la vidéo.',
'The media could not be loaded, either because the server or network failed or because the format is not supported.': 'Cette vidéo n\'a pas pu être chargée, soit parce que le serveur ou le réseau a échoué ou parce que le format n\'est pas reconnu.',
'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.': 'La lecture de la vidéo a été interrompue à cause d\'un problème de corruption ou parce que la vidéo utilise des fonctionnalités non prises en charge par votre navigateur.',
'No compatible source was found for this media.': 'Aucune source compatible n\'a été trouvée pour cette vidéo.'
})
export default {
name: 'videojs',
props: ['src'],
data () {
return {
msg: 'hello vue'
}
},
mounted () {
let player = videojs(this.$el, {})
/*
player.contextmenu()
player.contextmenuUI({
content: [{
href: 'https://www.brightcove.com/',
label: 'Brightcove'
}, {
label: 'Example Link',
listener: function () {
console.log('you clicked the example link!')
}
}]
})
player.selectSubtitle({
trackLanguage: 'es'
})
*/
player.videoJsResolutionSwitcher({
default: 'low'
})
}
}
</script>
Ce que je veux
http://codepen.io/anon/pen/wgGBWP
Ce que j'obtiens
J'obtiens un truc degueu:
http://pix.toile-libre.org/upload/original/1484158767.png
Alors que c'est le même CSS :( Je bosse dessus deouis 3h et j'en ai marre.
Merci