Maison interface Web tutoriel HTML Comment insérer des vidéos dans des pages Web ?

Comment insérer des vidéos dans des pages Web ?

Jul 18, 2017 pm 04:41 PM
插入 方案 视频

Différents sites Web ont des opérations similaires. Alors que la quantité d'informations sur Internet augmente de jour en jour, les sites Web accordent également de plus en plus d'attention à la diversification des informations sur les données et à la conception personnalisée. Le développement et l'amélioration progressifs de la technologie multimédia ont créé les conditions nécessaires au développement de formulaires d'affichage en ligne allant de la vidéo, de l'audio, du PPT, des graphiques, etc. à la vidéo.

Aujourd'hui, nous discutons de la solution consistant à insérer des vidéos dans des pages Web. Nous ne discuterons pas de la manière d'utiliser la balise vidéo. La manière la plus compatible d'écrire la balise vidéo est : <.>

 1 <video width="800" height=""> 2         <source src="myvideo.mp4" type="video/mp4"></source> 3         <source src="myvideo.ogv" type="video/ogg"></source> 4         <source src="myvideo.webm" type="video/webm"></source> 5         <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"> 6             <param name="movie" value="myvideo.swf" /> 7             <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" /> 8         </object> 9         当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>10     </video>
Copier après la connexion
Cependant, il n'est généralement pas possible de générer des vidéos aux formats MP4, ogg, webm et swf (flash) à partir d'une même vidéo car cela prend trop de temps.

La première option discutée est la suivante : téléchargez la vidéo sur des sites Web de vidéos tiers tels que iQiyi, Youku et Tencent, et utilisez le code fourni par le site Web tiers (sous la vidéo (peut être trouvé dans le bouton "Partager"), le code de test spécifique est :

 1 <!DOCTYPE html> 2 <html lang="zh"> 3  4     <head> 5         <meta charset="UTF-8" /> 6         <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7         <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8         <title>网页中插入视频的方法</title> 9         <style type="text/css">10             * {11                 margin: 0;12                 padding: 0;13             }14             15             body {16                 text-align: center;17             }18             19             div {20                 font-size: 18px;21                 color: #2E8DED;22                 margin-top: 20px;23             }24         </style>25     </head>26 27     <body>28         <!--爱奇艺视频(无通用代码) 只支持PC端 IE8以上都可以-->29         <div>30             爱奇艺视频(无通用代码) 只支持PC端 IE8以上都可以31         </div>32         <embed src="http://player.video.qiyi.com/8b89d9c3ec3535c93ceaded663cc91c2/0/0/v_19rr7zq9xw.swf-albumId=715375800-tvId=715375800-isPurchase=0-cnId=25" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>33         <div>34             腾讯视频 全部支持 IE8以上都可以35         </div>36         <!--腾讯视频 全部支持 IE8以上都可以-->37         <iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=p0521h3uu1a&tiny=0&auto=0" allowfullscreen></iframe>38         <div>39             优酷视频 全部支持 IE8以上都可以40         </div>41         <!--优酷视频 全部支持 IE8以上都可以-->42         <iframe height=498 width=510 src=&#39;http://player.youku.com/embed/XMjg2OTA1NDc5Mg==&#39; frameborder=0 &#39;allowfullscreen&#39;></iframe>43     </body>44 45 </html>
Copier après la connexion
L'effet d'affichage de la page Web est :

Il convient de noter que lors du partage de codes sur des sites vidéo tiers, choisissez un code commun, afin que les PC et les terminaux mobiles puissent bien afficher la vidéo.

La deuxième option discutée est la suivante : utiliser le plug-in ckplayer.

Le site officiel du plug-in ckplayer est :

Le site officiel a une fonction de configuration en ligne, vous pouvez configurer selon vos propres besoins, parmi lesquels Un meilleur code de test est ckplayer appelant le lecteur html5,

 1 <!DOCTYPE html> 2 <html lang="zh"> 3  4     <head> 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6         <title>ckplayer调用html5播放器</title> 7     </head> 8  9     <body>10         <div id="a1"></div>11         <!--引入ckplayer.js-->12         <script type="text/javascript" src="ckplayer/ckplayer.js?1.1.11" charset="utf-8"></script>13         <script type="text/javascript">14             var flashvars = {15                 //p参数为是否自动播放,可以为 1 或 0,默认为 1,参数不为 1 时播放器加载完成后均为暂停状态。16                 p: 0,17                 //e为视频结束后的动作,0 停止播放并发送js,1 是不发送 js 且重新循环播放,2 停止播放,默认为2。18                 e: 1,19                 //i为视频播放器初始图片地址,即封面图片,默认为空。20                 i: ''21             };22             // 为视频地址23             var video = [';video/mp4'];24             var support = ['all'];25             //第一个100% 为宽度同样可以设置为像素,第二个100% 为高度同样可以设置为像素26             CKobject.embedHTML5('a1', 'ckplayer_a1', '100%', '100%', video, flashvars, support);27         </script>28     </body>29 30 </html>
Copier après la connexion

L'effet PC est :

L'effet version mobile est :

Remarque : la vidéo doit uniquement utiliser le format MP4 qui est actuellement pris en charge par la plupart des navigateurs, et peu de formats vidéo doivent être traités. Deuxièmement, l'utilisation du plug-in ckplayer peut être parfaitement compatible avec les navigateurs PC et mobiles (après tests, les vidéos IE8 ne peuvent pas être lues ).

Résumé :

Il est d'abord recommandé de télécharger la vidéo sur un site Web vidéo tiers, qui a bonne compatibilité et la vidéo est chargée en même temps. C'est rapide et n'occupe pas les ressources de bande passante du serveur du site Web.

Deuxièmement, utilisez le plug-in ckplayer pour insérer des vidéos locales dans la page Web.

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Où sont stockés les fichiers vidéo dans le cache du navigateur ? Où sont stockés les fichiers vidéo dans le cache du navigateur ? Feb 19, 2024 pm 05:09 PM

Dans quel dossier le navigateur met-il la vidéo en cache ? Lorsque nous utilisons le navigateur Internet quotidiennement, nous regardons souvent diverses vidéos en ligne, comme regarder des clips vidéo sur YouTube ou regarder des films sur Netflix. Ces vidéos seront mises en cache par le navigateur pendant le processus de chargement afin qu'elles puissent être chargées rapidement lors d'une nouvelle lecture ultérieure. La question est donc de savoir dans quel dossier ces vidéos mises en cache sont réellement stockées ? Différents navigateurs stockent les dossiers vidéo mis en cache à différents emplacements. Ci-dessous, nous présenterons plusieurs navigateurs courants et leurs

Est-ce une infraction de publier des vidéos d'autres personnes sur Douyin ? Comment éditer des vidéos sans infraction ? Est-ce une infraction de publier des vidéos d'autres personnes sur Douyin ? Comment éditer des vidéos sans infraction ? Mar 21, 2024 pm 05:57 PM

Avec l'essor des plateformes de vidéos courtes, Douyin est devenu un élément indispensable de la vie quotidienne de chacun. Sur TikTok, nous pouvons voir des vidéos intéressantes du monde entier. Certaines personnes aiment publier les vidéos d’autres personnes, ce qui soulève une question : Douyin enfreint-il la publication de vidéos d’autres personnes ? Cet article abordera ce problème et vous expliquera comment éditer des vidéos sans infraction et comment éviter les problèmes d'infraction. 1. Cela porte-t-il atteinte à la publication par Douyin de vidéos d'autres personnes ? Selon les dispositions de la loi sur le droit d'auteur de mon pays, l'utilisation non autorisée des œuvres du titulaire du droit d'auteur sans l'autorisation du titulaire du droit d'auteur constitue une infraction. Par conséquent, publier des vidéos d’autres personnes sur Douyin sans l’autorisation de l’auteur original ou du titulaire des droits d’auteur constitue une infraction. 2. Comment monter une vidéo sans contrefaçon ? 1. Utilisation de contenu du domaine public ou sous licence : Public

Comment supprimer le filigrane vidéo dans Wink Comment supprimer le filigrane vidéo dans Wink Feb 23, 2024 pm 07:22 PM

Comment supprimer les filigranes des vidéos dans Wink ? Il existe un outil pour supprimer les filigranes des vidéos dans winkAPP, mais la plupart des amis ne savent pas comment supprimer les filigranes des vidéos dans Wink. Voici ensuite l'image de la façon de supprimer les filigranes des vidéos dans Wink. apporté par l'éditeur Tutoriel texte, les utilisateurs intéressés viennent y jeter un oeil ! Comment supprimer le filigrane vidéo dans Wink 1. Ouvrez d'abord l'application Wink et sélectionnez la fonction [Supprimer le filigrane] dans la zone de la page d'accueil ; 2. Sélectionnez ensuite la vidéo dont vous souhaitez supprimer le filigrane dans l'album ; dans le coin supérieur droit après avoir édité la vidéo [√] ; 4. Enfin, cliquez sur [Imprimer en un clic] comme indiqué dans la figure ci-dessous, puis cliquez sur [Traiter].

Comment gagner de l'argent en publiant des vidéos sur Douyin ? Comment un débutant peut-il gagner de l'argent sur Douyin ? Comment gagner de l'argent en publiant des vidéos sur Douyin ? Comment un débutant peut-il gagner de l'argent sur Douyin ? Mar 21, 2024 pm 08:17 PM

Douyin, la plateforme nationale de courtes vidéos, nous permet non seulement de profiter d'une variété de courtes vidéos intéressantes et originales pendant notre temps libre, mais nous donne également une scène pour nous montrer et réaliser nos valeurs. Alors, comment gagner de l’argent en postant des vidéos sur Douyin ? Cet article répondra à cette question en détail et vous aidera à gagner plus d’argent sur TikTok. 1. Comment gagner de l’argent en publiant des vidéos sur Douyin ? Après avoir posté une vidéo et obtenu un certain nombre de vues sur Douyin, vous aurez la possibilité de participer au plan de partage publicitaire. Cette méthode de revenus est l’une des plus connues des utilisateurs de Douyin et constitue également la principale source de revenus pour de nombreux créateurs. Douyin décide d'offrir ou non des opportunités de partage de publicités en fonction de divers facteurs tels que le poids du compte, le contenu vidéo et les commentaires du public. La plateforme TikTok permet aux téléspectateurs de soutenir leurs créateurs préférés en envoyant des cadeaux,

Comment publier des vidéos sur Weibo sans compresser la qualité de l'image_Comment publier des vidéos sur Weibo sans compresser la qualité de l'image Comment publier des vidéos sur Weibo sans compresser la qualité de l'image_Comment publier des vidéos sur Weibo sans compresser la qualité de l'image Mar 30, 2024 pm 12:26 PM

1. Ouvrez d'abord Weibo sur votre téléphone mobile et cliquez sur [Moi] dans le coin inférieur droit (comme indiqué sur l'image). 2. Cliquez ensuite sur [Gear] dans le coin supérieur droit pour ouvrir les paramètres (comme indiqué sur l'image). 3. Ensuite, recherchez et ouvrez [Paramètres généraux] (comme indiqué sur l'image). 4. Entrez ensuite l'option [Video Follow] (comme indiqué sur l'image). 5. Ensuite, ouvrez le paramètre [Résolution de téléchargement vidéo] (comme indiqué sur l'image). 6. Enfin, sélectionnez [Qualité d'image originale] pour éviter la compression (comme indiqué sur l'image).

2 façons de supprimer le ralenti des vidéos sur iPhone 2 façons de supprimer le ralenti des vidéos sur iPhone Mar 04, 2024 am 10:46 AM

Sur les appareils iOS, l'application Appareil photo vous permet de filmer des vidéos au ralenti, voire à 240 images par seconde si vous possédez le dernier iPhone. Cette capacité vous permet de capturer une action à grande vitesse avec des détails riches. Mais parfois, vous souhaiterez peut-être lire des vidéos au ralenti à vitesse normale afin de mieux apprécier les détails et l'action de la vidéo. Dans cet article, nous expliquerons toutes les méthodes pour supprimer le ralenti des vidéos existantes sur iPhone. Comment supprimer le ralenti des vidéos sur iPhone [2 méthodes] Vous pouvez utiliser l'application Photos ou l'application iMovie pour supprimer le ralenti des vidéos sur votre appareil. Méthode 1 : ouvrir sur iPhone à l’aide de l’application Photos

Comment publier les œuvres vidéo de Xiaohongshu ? À quoi dois-je faire attention lorsque je publie des vidéos ? Comment publier les œuvres vidéo de Xiaohongshu ? À quoi dois-je faire attention lorsque je publie des vidéos ? Mar 23, 2024 pm 08:50 PM

Avec l'essor des plateformes de vidéos courtes, Xiaohongshu est devenue une plateforme permettant à de nombreuses personnes de partager leur vie, de s'exprimer et de gagner du trafic. Sur cette plateforme, la publication d’œuvres vidéo est un moyen d’interaction très prisé. Alors, comment publier les œuvres vidéo de Xiaohongshu ? 1. Comment publier les œuvres vidéo de Xiaohongshu ? Tout d’abord, assurez-vous d’avoir un contenu vidéo prêt à partager. Vous pouvez utiliser votre téléphone portable ou un autre équipement photo pour prendre des photos, mais vous devez faire attention à la qualité de l'image et à la clarté du son. 2. Editer la vidéo : Afin de rendre le travail plus attrayant, vous pouvez éditer la vidéo. Vous pouvez utiliser un logiciel de montage vidéo professionnel, tel que Douyin, Kuaishou, etc., pour ajouter des filtres, de la musique, des sous-titres et d'autres éléments. 3. Choisissez une couverture : La couverture est la clé pour inciter les utilisateurs à cliquer. Choisissez une image claire et intéressante comme couverture pour inciter les utilisateurs à cliquer dessus.

Comment convertir des vidéos téléchargées par le navigateur UC en vidéos locales Comment convertir des vidéos téléchargées par le navigateur UC en vidéos locales Feb 29, 2024 pm 10:19 PM

Comment transformer les vidéos téléchargées par le navigateur UC en vidéos locales ? De nombreux utilisateurs de téléphones mobiles aiment utiliser UC Browser. Ils peuvent non seulement naviguer sur le Web, mais également regarder diverses vidéos et programmes télévisés en ligne et télécharger leurs vidéos préférées sur leurs téléphones mobiles. En fait, nous pouvons convertir des vidéos téléchargées en vidéos locales, mais beaucoup de gens ne savent pas comment le faire. Par conséquent, l'éditeur vous propose spécialement une méthode pour convertir les vidéos mises en cache par le navigateur UC en vidéos locales. J'espère que cela pourra vous aider. Méthode pour convertir les vidéos mises en cache du navigateur uc en vidéos locales 1. Ouvrez le navigateur uc et cliquez sur l'option "Menu". 2. Cliquez sur « Télécharger/Vidéo ». 3. Cliquez sur « Vidéo mise en cache ». 4. Appuyez longuement sur n'importe quelle vidéo, lorsque les options apparaissent, cliquez sur « Ouvrir le répertoire ». 5. Cochez ceux que vous souhaitez télécharger

See all articles