HTML5怎么添加视频内容？附四种不同方法

在网页开发中，免不了需要涉及到插入视频的开发，比如企业视频介绍。那么 HTML 怎么添加视频呢？这篇文章告诉你 HTML 三种添加视频的方法。

方法一：<video>标签

​<video></video>​标签是 HTML5 的一个新特性，它用于在 HTML 页面嵌入视频元素。具体使用方法如下：

<video controls >
     <source src="视频路径" type="video/视频格式">
</video>

方法二：<embed>标签

​<embed>​标签的作用是在 HTML 页面中嵌入多媒体元素。具体使用方法如下：

<embed src="视频路径" />

但是<embed>并不常被使用，因为它仅支持用 flash 播放，如果浏览器不支持 flash，则视频不能播放。

方法三：<object>标签

​<object>​标签的作用也是用来嵌入多媒体元素。具体使用方法如下：

<object data="视频地址"/>

此标签同方法二一样，并不经常被用到。

 

方法四：<三方云平台>标签

HTML5播放器标准范例

说明：本代码为Html5播放器调用，对各终端的适配性更好，故强力推荐使用。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>

TIPS：
wrap: '#player' //warp为引用的容器
width: 800 //播放器的宽度
height: 533 //播放器的高度
vid: 'e785b2c81c9e018296671a1287e99615_e' //酷播云视频vid

 我的热门文章推荐

• 为视频添加密码观看权限教程，请点击查看密码观看权限教程>>
• 如何制作带企业图标的视频二维码？方便企业形象宣传，点击查看教程>>
• 100个视频如何转换成1个二维码，点击查看教程>>
• 产品包装印刷宣传视频二维码使用教程，点击查看教程>>

• 多路视频直播用在线云导播切换的效果测试
• 如何把视频转换生成二维码，扫码直接播放？
• 有哪些网站上传视频是不会插入广告的？
• 怎么把视频生成二维码？微信扫二维码就可以观看？不要广告的
• 常用照片尺寸对照表，照片大小看这个表就对了
• 视频直播推流攻略（整理的各大平台推流界面）
• html5视频倍速播放功能
• 教你一招：多个视频如何实现列表播放？
• 微信公众号如何实现视频列表播放视频的功能
• h5视频倍速播放功能(视频多倍速观看功能的实例)
• 怎样配置FTP服务器
• 如何使用FTP上传文件（FTP文件传输）
• OBS直播工具使用指南/OBS推送直播视频源到服务器的工具
• QQ浏览器劫持video标签加载自己的广告（怎么解决？）