Wie füge ich Videos in Webseiten ein?-HTML-Tutorial-php.cn

Wie füge ich Videos in Webseiten ein?

零下一度

Freigeben： 2017-07-18 16:41:31

Original

9294 Leute haben es durchsucht

Verschiedene Websites haben ähnliche Vorgänge. Da die Informationsmenge im Internet von Tag zu Tag zunimmt, legen Websites auch immer mehr Wert auf die Diversifizierung und personalisierte Gestaltung von Dateninformationen. Die schrittweise Entwicklung und Verbesserung der Multimedia-Technologie hat die Voraussetzungen für die Entwicklung von Online-Anzeigeformen von Video, Audio, PPT, Diagrammen usw. bis hin zu Video geschaffen.

Heute besprechen wir die Lösung zum Einfügen von Videos in Webseiten. Wir werden nicht darauf eingehen, wie man das Video-Tag verwendet. Die kompatiblere Art, das Video-Tag zu schreiben, ist:

 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>

Nach dem Login kopieren

Allerdings ist es im Allgemeinen nicht möglich, Videos in den Formaten MP4, Ogg, WebM und SWF (Flash) aus demselben Video zu generieren, da dies zu viel Zeit in Anspruch nimmt.

Die erste besprochene Option ist: Laden Sie das Video auf Video-Websites von Drittanbietern wie iQiyi, Youku und Tencent hoch und verwenden Sie den von der Website des Drittanbieters bereitgestellten Code (unter dem Video). (zu finden in der Schaltfläche „Teilen“), der spezifische Testcode lautet:

 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>

Nach dem Login kopieren

Der Webseiten-Anzeigeeffekt ist:

Es ist zu beachten, dass Sie beim Teilen von Codes auf Video-Websites von Drittanbietern einen gemeinsamen Code wählen, damit sowohl PC als auch mobile Endgeräte das Video gut anzeigen können.

Die zweite besprochene Option ist: Verwendung des ckplayer-Plug-ins.

Die offizielle Website des ckplayer-Plug-ins ist:

Die offizielle Website verfügt über eine Online-Konfigurationsfunktion, die Sie konfigurieren können es entsprechend Ihren eigenen Bedürfnissen, darunter Ein besserer Testcode ist ckplayer, der den HTML5-Player aufruft,

 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>

Nach dem Login kopieren

Der PC-Effekt ist:

Der Effekt der mobilen Version ist:

Hinweis: Das Video muss nur das MP4-Format verwenden, das derzeit von den meisten Browsern unterstützt wird, und es gibt nur wenige Videoformate, die verarbeitet werden müssen. Zweitens kann die Verwendung des ckplayer-Plug-ins perfekt mit PC- und mobilen Browsern kompatibel sein (nach dem Test können IE8-Videos nicht abgespielt werden ).

Zusammenfassung:

Es wird zunächst empfohlen, das Video auf eine Video-Website eines Drittanbieters hochzuladen Gute Kompatibilität und das Video wird gleichzeitig geladen. Es ist schnell und belegt nicht die Bandbreitenressourcen des Website-Servers.

Zweitens verwenden Sie das ckplayer-Plug-in, um lokale Videos in die Webseite einzufügen.

Das obige ist der detaillierte Inhalt vonWie füge ich Videos in Webseiten ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!