HTML教程实现网页在线视频播放的几种方法

本教程详细介绍实现网页上在线播放视频的几种方法和操作示例。

工具/原料

代码编辑器（DreamWeaver、Notepad++、Visual Studio Code）

Flash插件

Ckplayer X H5播放器

准备工作

打开代码编辑器（我使用的是Visual Studio Code，其他的也是同理），创建一个演示文件，我们取名test.html

我们先把html文件的标准格式写好

为了方便演示，再给页面定义一下风格

HTML标签embed

使用HTML标签播放，只需在src中填入需要播放的视频地址即可PS：必须是embed标签支持的视频格式才可以播放，支持格式可以自行查阅

播放效果

H5标签video

在页面中插入一个

播放效果

iframe播放

标签是所有浏览器都支持的标签，使用这个标签会创建包含另外一个文档的内联框架，通俗点来说就是相当于在页面中再放置一个小型的浏览器，可以打开地址，也可以打开flash和视频等。PS：部分浏览器使用iframe直接打开视频地址会弹出视频下载的情况。</p></div><div class="listcon"><span>2</span><p>这里的frameborder属性只能填写0和1，和开关是一个原理，0是没有边框，1是显示边框，至于边框的属性，可以单独在style中定义</p></div><div class="listcon"><span>3</span><p>播放效果</p></div><div class="listcon"><span>4</span><p>如果是想要播放flash也是同理，这里就不做过多演示了</p></div></div><div class="ltitle"><span>ckplayer播放器</span></div><div class="lcon"><div class="listcon"><span>1</span><p>ckplayer是一个用JavaScript编写的网页视频播放器，支持主流的视频格式和主流用户浏览器，并且适配多终端设备，下面介绍怎么使用ckplayer在网页实现在线视频播放。</p></div><div class="listcon"><span>2</span><p>将ckplayer下载到本地，把ckplayer文件夹解压出来放在本地网站环境中去，先前创建的test.html也是一样PS：ckplayer X之后的版本需在网站环境中才能使用，组建网站环境这里就不做演示了。</p></div><div class="listcon"><span>3</span><p>在网页中调用ckplayer播放组件</p></div><div class="listcon"><span>4</span><p>设置播放器的基本属性和需要播放的视频地址</p></div><div class="listcon"><span>5</span><p>播放效果</p></div><div class="listcon"><span>6</span><p>我们还可以给播放器加上视频封面，在代码中加上poster:'图片地址'，就可以给视频加上封面</p></div><div class="listcon"><span>7</span><p>ckplayer播放器还有很多好玩的功能，大家可以自己去研究一下，教程到这里就结束了。</p></div></div><div class="ltitle"><span>注意事项</span></div><div class="lcon"><div class="listcon"><span>1</span><p>ckplayer一定要在网站环境中才能使用，否则会提示错误</p></div><div class="listcon"><span>2</span><p>更多教程可以访问北羽博客查看</p></div></div><div class="prev_next"> <div class="prev"> <span>上一篇：</span><a href="/ygmo.html">原神如何更改标记名称</a> </div> <div class="next"> <span>下一篇：</span><a href="/ygmq.html">原神角色芭芭拉天赋加点顺序</a> </div> </div> </div> <div class="appleccmw content-right"> <div class="listmore">推荐信息</div> <div class="send_list"> <ul> <li><a href="/ygmp.html" title="HTML教程实现网页在线视频播放的几种方法"><span>1</span><h3>HTML教程实现网页在线视频播放的几种方法</h3></a></li> <li><a href="/ffjhb.html" title="蒜香蜂蜜烤鸡胸肉"><span>2</span><h3>蒜香蜂蜜烤鸡胸肉</h3></a></li> <li><a href="/ffjha.html" title="蒜香黑胡椒鸡胸肉的做法步骤"><span>3</span><h3>蒜香黑胡椒鸡胸肉的做法步骤</h3></a></li> <li><a href="/ffjgz.html" title="怎么做蒜香鸡胸肉？"><span>4</span><h3>怎么做蒜香鸡胸肉？</h3></a></li> <li><a href="/ffjgy.html" title="失眠症是什么"><span>5</span><h3>失眠症是什么</h3></a></li> <li><a href="/ffjgx.html" title="Excel中如何快速计算员工工龄？"><span>6</span><h3>Excel中如何快速计算员工工龄？</h3></a></li> <li><a href="/ffjgw.html" title="Excel表格中怎样快速批量算出职工工龄"><span>7</span><h3>Excel表格中怎样快速批量算出职工工龄</h3></a></li> <li><a href="/ffjgv.html" title="Excel中实现工资、序号、出生年月及年龄的运算"><span>8</span><h3>Excel中实现工资、序号、出生年月及年龄的运算</h3></a></li> <li><a href="/ffjgu.html" title="Excel如何计算员工的工龄"><span>9</span><h3>Excel如何计算员工的工龄</h3></a></li> <li><a href="/ffjgt.html" title="Excel表格中如何计算工作年限"><span>10</span><h3>Excel表格中如何计算工作年限</h3></a></li> <li><a href="/ffjgs.html" title="弗洛伊德五个阶段性发展理论是什么"><span>11</span><h3>弗洛伊德五个阶段性发展理论是什么</h3></a></li> <li><a href="/ffjgr.html" title="如何求excel中年龄和工龄"><span>12</span><h3>如何求excel中年龄和工龄</h3></a></li> <li><a href="/ffjgq.html" title="怎么确定回避型依恋人格"><span>13</span><h3>怎么确定回避型依恋人格</h3></a></li> <li><a href="/ffjgp.html" title="excel中如何根据员工出生日期快速得到员工年龄"><span>14</span><h3>excel中如何根据员工出生日期快速得到员工年龄</h3></a></li> <li><a href="/ffjgo.html" title="ISFP女适合和什么类型的交朋友和谈恋爱呢"><span>15</span><h3>ISFP女适合和什么类型的交朋友和谈恋爱呢</h3></a></li> <li><a href="/ffjgn.html" title="Excel怎么计算员工工龄"><span>16</span><h3>Excel怎么计算员工工龄</h3></a></li> <li><a href="/ffjgm.html" title="性格比较自大怎么办"><span>17</span><h3>性格比较自大怎么办</h3></a></li> <li><a href="/ffjgl.html" title="怎样才能性格开朗起来"><span>18</span><h3>怎样才能性格开朗起来</h3></a></li> <li><a href="/ffjgk.html" title="性格内向怎么办？"><span>19</span><h3>性格内向怎么办？</h3></a></li> <li><a href="/ffjgj.html" title="istp型人格的著名人物有哪些"><span>20</span><h3>istp型人格的著名人物有哪些</h3></a></li> <li><a href="/ffjgi.html" title="enfp会喜欢isfp吗"><span>21</span><h3>enfp会喜欢isfp吗</h3></a></li> </ul> <div class="clear"></div> </div> </div> </div> <div class="clear"></div> <div class="onjfeeds"></div><span class="onj_live"></span><span class="childonj"></span><div class="onj_location"></div><span class="buddhaonj"></span><div class="branchesccmw footer_service"> <a href="/sitemap.html" target="_blank">网站地图</a> <a href="/sitemap.xml" target="_blank">XML</a> <a href="/sitemap.txt" target="_blank">TXT</a> <a href="/rss.xml" target="_blank">RSS</a> <a href="/privacy.html" target="_blank">隐私政策</a> <a href="/service.html" target="_blank">服务条款</a> <a href="/agreement.html" target="_blank">使用条款</a> <div class="flagccmw footer_copyright clogWalletccmw">Copyright ©1996-2024 www.onijiang.com Corporation, All Rights Reserved</div> </div> <script src="/static/index1js/jquery-3.5.1.min.js" rel="external nofollow"></script> <script src="/static/js/share.js" rel="external nofollow"></script> <script src="/static/js/tran.js" rel="external nofollow"></script> <script src="/static/js/langs.js" rel="external nofollow" ></script> <div class="onj_happy"></div><span class="containeronj"></span><div class="baronj" id="baronj"></div><div id="Family_seal_onj"></div><script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>

欧尼酱

HTML教程 实现网页在线视频播放的几种方法

HTML教程实现网页在线视频播放的几种方法