Comment insérer des vidéos dans des pages Web ?-tutoriel HTML-php.cn

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

零下一度

Libérer： 2017-07-18 16:41:31

original

9311 Les gens l'ont consulté

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!