Videojs ajouter seulement jouer de contrôle

Je suis en utilisant Video.js pour lire des vidéos dans ma page web.
Je veux personnaliser les commandes du lecteur de ne jouer que bouton.

mon code est

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">

<script src="http://vjs.zencdn.net/c/video.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls
                    preload="auto" width="320" height="240" poster="thumb.png"
                    data-setup="{}">
                    <source src="v1.mp4" type='video/mp4'>
                    </video>

Quelqu'un peut-il me guider dans le lecteur de personnalisation?

OriginalL'auteur Ramesh Paul | 2012-11-23

4

La façon la plus simple que j'ai trouvé, c'est de modifier le prototype de la classe en tant que telle.

Insérer
```
<script>
    _V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>
```
juste après
```
<script src="http://vjs.zencdn.net/c/video.js"></script>
```
Cela permettra d'éliminer tous les contrôles ( y compris la durée, du temps restant et de la barre de recherche ) en plus de la jouer bouton bascule

Si vous souhaitez d'autres choses, vous pouvez choisir parmi les valeurs par défaut (quelques-uns de ceux-ci sont mis à caché sur le skin par défaut)
```
options: {
    components: {
        "playToggle": {},
        "fullscreenToggle": {},
        "currentTimeDisplay": {},
        "timeDivider": {},
        "durationDisplay": {},
        "remainingTimeDisplay": {},
        "progressControl": {},
        "volumeControl": {},
        "muteToggle": {}
    }
}
```
Ou de creuser par le biais de la controls.js fichier sur git hub
https://github.com/zencoder/video-js/blob/master/src/controls.js

Bien mieux que de simplement masquer les contrôles avec les CSS...
im obtenir ReferenceError: _V_ is not defined. vjs est pour dev
vous devriez être en mesure de remplacer les V ou vj avec videojs
Des versions plus récentes de videojs nécessiter d'accéder à différents composants par getComponent fonction. par exemple, le script ci-dessus peut être écrite comme: videojs.getComponent('ControlBar').prototype.options_.children = ['playToggle'];

OriginalL'auteur b.kelley
9

La façon dont j'ai été capable de le faire est par la définition de la classe css pour des contrôles spécifiques à display: none; dans ma page CSS. Ma page CSS est lié APRÈS la vidéo-js.css est lié.
```
/* Video.js Controls Style Overrides */
.vjs-default-skin .vjs-progress-control,
.vjs-default-skin .vjs-time-controls,
.vjs-default-skin .vjs-time-divider,
.vjs-default-skin .vjs-captions-button,
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-control,
.vjs-default-skin .vjs-fullscreen-control {
    display: none;  
}
```
Si vous ne pouvez pas le lien de votre page CSS après la vidéo-js.css est lié, vous pouvez utiliser display: none !important; à la place, et cela devrait faire l'affaire. Bien que, je n'avais utiliser !important comme un dernier recours.

Note: ce qui précède ne permet pas de supprimer le bouton pause une fois que le jeu est frappé, ni le gros bouton play. Il y a plus de considérations de l'INTERFACE utilisateur lors de la suppression de ceux-ci. J'espère que cela aidera certaines personnes à la personnalisation de l'Video.js la barre de contrôle.

Si c'est mieux de désactiver le JS pour les contrôles selon @b.kelley en premier lieu.

OriginalL'auteur Derek
2

Il semble qu'il y a également une option pour masquer/afficher le controlBar articles par l'intermédiaire de data-setup

Les composants sont répertoriés au
https://github.com/videojs/video.js/blob/stable/docs/guides/components.md

et la description des options https://github.com/videojs/video.js/blob/stable/docs/guides/options.md
```
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
```
la controlBar est adoptée comme suit:
```
data-setup='{ "controlBar": { "muteToggle": false } }'
```
Edit: comme le faisait remarquer, le comportement de children pour options a été simplifié et modifié, voir aussi la documentation: https://github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options
Pour l'arrière-plan et les horaires de ces changements, voir https://github.com/videojs/video.js/issues/953

le sélecteur css pour le gros bouton play est
```
.vjs-default-skin .vjs-big-play-button
```
mais s'il vous plaît assurez-vous d'avoir des solutions de rechange ou une configuration appropriée lorsque vous retirez l'option de lecture (;

mine semble masquer les commandes par défaut(?)

Merci @Sandra je suis capable de le gérer par l'ajout de css personnalisé pour le joueur.
Vous n'avez pas à utiliser ces children bits plus: <video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video>. Voir: github.com/videojs/video.js/blob/stable/docs/guides/...
Merci @dain, édité (:

OriginalL'auteur Sandra
1

Cela supprime également toutes de la barre de contrôle, mais pas le gros bouton play
```
.vjs-default-skin.vjs-has-started .vjs-control-bar {
visibility: hidden;
}
```
OriginalL'auteur user2935340
1

Si vous aussi vous voulez vous débarrasser de la touche play, et demandez à la lecture de la vidéo et de s'arrêter sur le clic, découvrez cette solution alternative, je me suis adapté.

Insérer dans votre <head> (ou ailleurs si pas possible) ...
```
<script type="text/javascript">
    function vidplay(me) {
       if (me.paused) {
          me.play();
       } else {
          me.pause();
       }
    }
</script>
```
ensuite appeler à partir de votre vidéo, par exemple
```
<video onclick="javascript: vidplay(this)" ...>
```
Assurez-vous que vous ne définissez pas le contrôle dans vos video tag. Évidemment, cette façon, vous pouvez jouer dans votre propre bouton personnalisé, qui le lié solution n'.

Pour tous les vous de gestionnaire d'événement fondamentalistes, soit vous savez comment le faire, ou de suivre ceci :p

OriginalL'auteur victor_v

Vous devez vous connecter pour publier un commentaire.