Découper la vidéo en HTML?

Je veux recadrer une vidéo en HTML 5.

<video id="glass" width="640" height="360" autoplay>
    <source src="invisible-glass-fill.mp4" type="video/mp4">
</video>

La résolution de la vidéo est de 640 x 360, mais quand j'ai mis le width attribut de 200, de la vidéo redimensionner (conserver les proportions). Comment recadrer la vidéo (couper, disons, 220 pixels de la gauche et côté droit) par le biais de HTML ou Javascript? Est-il même possible, sans recadrage de la vidéo par le biais d'un logiciel de montage vidéo?

Vous avez essayé de réglage height:auto ?

OriginalL'auteur MC Emperor | 2013-09-10

  1. 21

    Je vous recommande de le faire avec CSS et un wrapper:

    HTML

    <div class="container">
    <video id="glass" width="640" height="360" autoplay>
        <source src="invisible-glass-fill.mp4" type="video/mp4">
    </video>
</div>

    CSS

    .container{
    width: 200px;
    overflow:hidden;
    display:block;
    height: 360px;
}
#glass{
    margin-left: -220px;
}
    Nous devons définir un supplément de règle CSS pour déplacer la vidéo à gauche, afin de s'assurer que la vidéo est rognée sur les deux côtés. Nous pouvons le faire comme ceci: div.container video { margin-left: -220px; }. Cependant, cette réponse m'a conduit à la solution.
    ouais vous avez raison. J'ai oublié que nécessaire. Bon à savoir, il a aidé. Je vais mettre à jour la réponse grâce à votre contribution.
    Notez que vous aurez besoin de mettre la margin-left propriété de la video balise à l'intérieur de la div.container au lieu de la margin-left propriété de div.container lui-même. Vous avez besoin de modifier votre réponse. div.container video { margin-left: -220px; }
    mon erreur :).
    Cela a également des cultures les contrôles vidéo, si vous voulez montrer ces ...

    OriginalL'auteur Alvaro

  2. 2

    Ce que vous pourriez faire est d'utiliser de la toile et une copie de la partie de la vidéo que vous aimez.
    Voici quelques références: http://developertip.wordpress.com/2011/06/04/tuto-html5-how-to-crop-a-video-tag-into-a-canvas-tag/

    OriginalL'auteur Syd