communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Comment ajouter une affiche vidéo à l'en-tête du site Web ? Comment ajouter une affiche vidéo (exemple de code)

Comment ajouter une affiche vidéo à l'en-tête du site Web ? Comment ajouter une affiche vidéo (exemple de code)

青灯夜游
Libérer： 2018-10-25 15:50:17
avant
3960 Les gens l'ont consulté

Le contenu de cet article est de présenter comment ajouter une affiche vidéo à l'en-tête du site Web ? Comment ajouter une affiche vidéo (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Ajouter le code de l'affiche vidéo à l'en-tête du site : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频海报</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    #banner{
        width: 100%;
        height: 500px;
        background: purple;
        overflow: hidden;
        position: relative;
    }
    #banner video{
        width: 100%;
        position: relative;
        opacity: 0.6;  /* 设置透明度 */
    }

    #banner h2,h4{
        position: absolute;
        top: 120px;
        left: 150px;
        width: 100%;
        text-align: left;
        color: #fff;
        line-height: 30px;
        
    }
    #banner h2{
        top: 80px;
        font-size: 40px;
        text-decoration: underline;
    }
    </style>
</head>
<body>
    <div id="banner">
        <video loop autoplay>   <!-- loop循环播放，autoplay自动播放 --> 
            <source src="video/banner.mp4">
        </video>
        <h2>SLOW DOWN</h2>
        <h4>静下来<br> 携一缕清风，续一杯清茶 <br> 且听风轻云淡</h4>
    </div>        
</body>
</html>
Copier après la connexion

Résultats

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
html5 video
source：cnblogs.com
Article précédent：Introduction aux quatre opérations de base de HTML5 WebSQL Article suivant：Introduction détaillée à la balise vidéo en html5
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ? Dans ReactThreeFiber, j'ai un composant React qui génère un sprite que je souhaite conserv...
Depuis 2024-04-06 13:39:24
0
1
410
Problèmes de connexion entre le terminal de reconnaissance faciale iVMS-4200 et la base Le terminal de reconnaissance faciale iVMS-4200 affiche une erreur lors de la connexion à ...
Depuis 2024-04-06 12:20:33
0
1
347
Utilisez JS pour contrôler la qualité de lecture Existe-t-il un moyen de contrôler la qualité de lecture d'une vidéo à l'aide de Javascript...
Depuis 2024-04-04 00:21:55
0
1
384
En utilisant PHP, puis-je mettre une instruction foreach dans un transitoire ? Je travaille dans WP en utilisant PHP et j'essaie de réduire le temps de chargement d'une ...
Depuis 2024-04-03 17:12:43
0
2
330
Comment récupérer un texte Google Weather spécifique à l'aide de BeautifulSoup ? Comment trouver le texte du cours « New York City, USA » en Python à l'aide de BeautifulSo...
Depuis 2024-04-01 14:06:14
0
1
308
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal