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

视频砖家

于 2025-03-05 10:15:23 发布

阅读量2.3k

点赞数 16

分类专栏：酷播云视频安全文章标签： html5 音视频前端

本文链接：https://blog.csdn.net/suny2020/article/details/146035547

版权

酷播云同时被 2 个专栏收录

40 篇文章

订阅专栏

视频安全

19 篇文章

订阅专栏

在网页开发中，免不了需要涉及到插入视频的开发，比如企业视频介绍。那么 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个二维码，点击查看教程>>
产品包装印刷宣传视频二维码使用教程，点击查看教程>>