首页 前端知识 HTML5怎么添加视频内容?附四种不同方法

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

2025-03-09 15:03:40 前端知识 前端哥 510 258 我要收藏

在网页开发中,免不了需要涉及到插入视频的开发,比如企业视频介绍。那么 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标签加载自己的广告(怎么解决?)

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/22982.html
标签
评论
发布的文章

面试题之强缓存协商缓存

2025-03-11 15:03:21

【C语言】数组篇

2025-03-11 15:03:19

正则表达式(复习)

2025-03-11 15:03:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!