다양한 웹사이트가 비슷한 운영을 하고 있습니다. 인터넷상의 정보량이 나날이 증가함에 따라 웹사이트 역시 데이터 정보의 다양화와 개인화 디자인에 점점 더 많은 관심을 기울이고 있습니다. 멀티미디어 기술의 점진적인 발전과 개선은 비디오, 오디오, PPT, 차트 등에서 비디오에 이르기까지 온라인 디스플레이 형식의 개발을 위한 조건을 제공했습니다.
오늘은 웹페이지에 동영상을 삽입하는 방법에 대해 논의하겠습니다. 동영상 태그를 사용하는 방법에 대해서는 논의하지 않겠습니다.
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&file=myvideo.swf" /> 8 </object> 9 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>10 </video>
로그인 후 복사
그러나 일반적으로 동일한 동영상입니다. 4가지 형식의 MP4, ogg, webm 및 swf(flash) 비디오는 시간이 너무 많이 걸리기 때문에 생성되지 않습니다.
논의된 첫 번째 해결책은 iQiyi, Youku 및 Tencent와 같은 제3자 비디오 웹사이트에 비디오를 업로드하고 제3자 웹사이트에서 제공한 코드를 사용하는 것입니다(동영상 아래의 "공유" 버튼에서 발견). , 구체적인 테스트 코드는 다음과 같습니다.
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='http://player.youku.com/embed/XMjg2OTA1NDc5Mg==' frameborder=0 'allowfullscreen'></iframe>43 </body>44 45 </html>로그인 후 복사
웹 페이지 표시 효과는 다음과 같습니다.
주의해야 할 점: 타사 비디오 웹사이트에서 코드를 공유할 때 공통 코드를 선택하십시오. PC 단말과 모바일 단말 모두 영상을 잘 표시할 수 있도록 합니다.
두 번째로 논의되는 옵션은 ckplayer 플러그인을 사용하는 것입니다.
ckplayer 플러그인의 공식 웹사이트는 다음과 같습니다.
공식 웹사이트에는 온라인 구성 기능이 있습니다. 더 나은 테스트 코드는 ckplayer에서 호출하는 것입니다. 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>로그인 후 복사
PC 효과:
모바일 버전 효과:
참고: 동영상은 MP4만 사용해야 합니다. 현재 대부분의 브라우저에서 지원되며 처리가 필요한 형식입니다. 몇 가지 비디오 형식입니다. 둘째, ckplayer 플러그인을 사용하면 PC 및 모바일 브라우저와 완벽하게 호환될 수 있습니다(테스트 후 IE8 동영상을 재생할 수 없습니다).
요약:
먼저 타사 비디오 웹사이트에 비디오를 업로드하는 것이 좋습니다. 호환성이 좋고 비디오가 빠르게 로드되며 웹사이트 서버의 대역폭 리소스를 차지하지 않습니다.
두 번째로 ckplayer 플러그인을 사용하여 웹 페이지에 로컬 비디오를 삽입하세요.
위 내용은 웹 페이지에 비디오를 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
