如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
HTML教程 实现网页在线视频播放的几种方法
来源：互联网
2023-03-16 19:16:29 版权归原作者所有，如有侵权，请联系我们
本教程详细介绍实现网页上在线播放视频的几种方法和操作示例。
工具/原料
- 代码编辑器（DreamWeaver、Notepad 、Visual Studio Code）
- Flash插件
- Ckplayer X H5播放器
准备工作
打开代码编辑器（我使用的是Visual Studio Code，其他的也是同理），创建一个演示文件，我们取名test.html
我们先把html文件的标准格式写好
为了方便演示，再给页面定义一下风格
HTML标签embed
使用HTML标签embed>播放，只需在src中填入需要播放的视频地址即可
PS：必须是embed标签支持的视频格式才可以播放，支持格式可以自行查阅
播放效果
H5标签video
在页面中插入一个video>标签，使用方法和embed相差不大
video>标签可以在标签中间写一些提示文本，当出现浏览器不支持时，就会显示提示文本。
video src="视频地址" controls="controls">您的浏览器不支持 video 标签。/video>
播放效果
iframe播放
iframe> 标签是所有浏览器都支持的标签，使用这个标签会创建包含另外一个文档的内联框架，通俗点来说就是相当于在页面中再放置一个小型的浏览器，可以打开地址，也可以打开flash和视频等。
PS：部分浏览器使用iframe直接打开视频地址会弹出视频下载的情况。
这里的frameborder属性只能填写0和1，和开关是一个原理，0是没有边框，1是显示边框，至于边框的属性，可以单独在style中定义
播放效果
如果是想要播放flash也是同理，这里就不做过多演示了
ckplayer播放器
ckplayer是一个用JavaScript编写的网页视频播放器，支持主流的视频格式和主流用户浏览器，并且适配多终端设备，下面介绍怎么使用ckplayer在网页实现在线视频播放。
将ckplayer下载到本地，把ckplayer文件夹解压出来放在本地网站环境中去，先前创建的test.html也是一样
PS：ckplayer X之后的版本需在网站环境中才能使用，组建网站环境这里就不做演示了。
在网页中调用ckplayer播放组件
设置播放器的基本属性和需要播放的视频地址
播放效果
我们还可以给播放器加上视频封面，在代码中加上poster:'图片地址'，就可以给视频加上封面
ckplayer播放器还有很多好玩的功能，大家可以自己去研究一下，教程到这里就结束了。
注意事项
- ckplayer一定要在网站环境中才能使用，否则会提示错误
- 更多教程可以访问北羽博客查看
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：js 初始化动态创建on方法 下一篇：js创建元素怎么获取
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 434 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)