How to insert videos into web pages?-HTML Tutorial-php.cn

How to insert videos into web pages?

零下一度

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

Original

9215 people have browsed it

Different websites have similar operations. Under the premise that the amount of information on the Internet is expanding day by day, websites also pay more and more attention to the diversification and personalized design of data information. The gradual development and improvement of multimedia technology has provided conditions for the development of online display forms from video, audio, PPT, charts, etc. to video.

Today we will discuss how to insert videos into web pages. We will not discuss how to use the video tag. The more compatible way of writing the video tag is:

 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>

Copy after login

However, it is generally not possible to generate videos in MP4, ogg, webm and swf (flash) formats from the same video because it takes up too much time.

The first solution discussed is: upload the video to third-party video websites such as iQiyi, Youku and Tencent, and use the code provided by the third-party website (below the video (can be found in the "Share" button), the specific test code is:

 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>

Copy after login

The web page display effect is:

##It should be noted that when sharing codes on third-party video websites, select a common code so that both the PC and mobile terminals can display the video well.

#The second option discussed is: use the ckplayer plug-in.

The official website of the ckplayer plug-in is:

There is an online configuration function on the official website, you can configure it according to your own needs, among which A better test code is ckplayer calling the html5 player,

 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>

Copy after login

PC effect is:

The mobile version effect is:

Note: The video only needs to use the MP4 format that is currently supported by the most browsers, and there are few video formats that need to be processed. Secondly, using the ckplayer plug-in can be perfectly compatible with PC and mobile browsers (after testing, IE8 videos cannot be played).

Summary:

It is first recommended to upload the video to a third-party video website, which has good compatibility and the video is loaded at the same time It is fast and does not occupy the bandwidth resources of the website server.

Secondly use the ckplayer plug-in to insert local videos into the web page.

The above is the detailed content of How to insert videos into web pages?. For more information, please follow other related articles on the PHP Chinese website!