Vidéo HTML5: possible de mettre en place régulière du contenu html de la vidéo
Demandais juste si quelqu'un connaît toutes les astuces pour faire régulièrement du contenu html (principalement une balise img) à afficher au-dessus d'une vidéo (via la balise vidéo)?
OriginalL'auteur Jason Miesionczek | 2011-01-07
Vous devez vous connecter pour publier un commentaire.
Comme d'autres l'ont laissé entendre qu'il est très facile de positionner les éléments HTML sur le dessus de
VIDEO
éléments à l'aide de positionnement absolu. La difficulté survient lorsque vous essayez de capturer des événements sur eux dans l'iPhone, iPod et éventuellement d'anciens téléphones Android qui ne jouent pas, les éléments vidéo inline sur la page (par opposition à une fine natif de lecture client), car dans ces cas, lesVIDEO
élément goulûment capture les événements.Si vous utilisez un
IMAGE
ou un élément deDIV
avec sesbackground-image
ensemble de l'image que vous souhaitez utiliser comme un "poster" ou "miniature", alors que vos utilisateurs ne seront pas en mesure de puiser sur eux pour obtenir la vidéo pour démarrer le jeu, le navigateur mobile permettra de traiter ce problème comme si de rien n'mais laVIDEO
élément existe dans cet espace (bon si vous cliquez sur dans le milieu où le "big play" mais il n'est pas si utile, si vous avez, disons, avoir un contrôle personnalisé pas dans le milieu.La solution que j'ai utilisé dans le passé est de mettre juste le
IMG
ouDIV
affiche sur la page où vous auriez normalement mettre à laVIDEO
élément de décalage et de laVIDEO
élément à l'écran (position absolue avecleft
set de feuilles de style, par exemple, -3000px) de manière à ne plus accumuler de ces événements.Je sais que ce n'est pas exactement ce qui était demandé, mais j'espère que cette information sera utile à quelqu'un.
stackoverflow.com/questions/3683211/...
OriginalL'auteur natlee75
Vous pouvez simplement mettre les éléments html sur le dessus de la vidéo HTML5 en les positionnant absolument sur le dessus de la vidéo. Donner à la fois la vidéo de l'élément et l'élément HTML d'une "position:absolute" et de mettre l'élément HTML d'un z-index plus élevé que la vidéo de l'élément.
Voici un exemple. Mais vous devriez essayer de le faire vous-même la prochaine fois. M'en coûte 5 min ;): jsfiddle.net/GxvyG
OriginalL'auteur jj1910
Pourquoi ne pas utiliser l'affiche attribut? De cette façon, vous pouvez afficher une image jusqu'à ce que la vidéo est chargée ou jouer.
La seule solution que je peux penser pour cet exemple particulier est à mettre automatiquement le div/img sur le dessus de la vidéo avec JavaScript. De cette façon, la vidéo sera chargé avec la page et n'interfère pas avec l'image. Vous voudrez peut-être garder un œil sur les z-index.
OriginalL'auteur Dennis Enderink
Vous pouvez vous mettre la vidéo en arrière-plan pour que la div? Vous ne savez pas si cela fonctionne pour votre mise en page, mais il semble logique...
Il y a à faire, avec l'aide de la <canvas> et <éléments de la vidéo ensemble. Je suis un mot HTML5 gourou. J'ai vu les principes de base sur ce site: html5doctor.com/video-canvas-magic Il utilise le canevas pour dessiner la vidéo en arrière-plan, et puis il pose une balise vidéo sur elle. Je pense que vous devriez être en mesure de placer une toile pour le BG de la vidéo, et d'utiliser une image d'affiche sur l'élément vidéo ou mettre une image sur la toile au lieu de la vidéo. Je me suis dit que la vidéo peut être utilisée comme un bg élément comme vous le feriez pour une image, mais je ne peux pas trouver un exemple de ce que n'importe où, peut-être que j'ai parlé trop vite. Espérons que cela aide.
OriginalL'auteur zenbike