HTML页面中引入视频的好方法

最新推荐文章于 2024-04-30 20:15:41 发布

原创最新推荐文章于 2024-04-30 20:15:41 发布 · 1.1w 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#html #html引入视频 #html5

web前端专栏收录该内容

5 篇文章

订阅专栏

搭建个人网站时，因个人云服务器内存和带宽有限，在HTML中本地引入视频会占用大量空间和带宽。可将视频放到优酷、bilibili等视频平台保存，使用时引入。如优酷复制通用代码、bilibili复制嵌入代码，粘贴到HTML页面即可。

在搭建个人网站时，我们租用的个人云服务器通常内存有限，带宽有限。想在HTML中引入视频，如果视频放在本地会占用大量的存储空间，在线播放的时候也会z占用本来就很小的带宽。一个好的解决办法就是把我们想要展示的视频放到某某视频平台上，让他们替我们保存。我们只需要在用到的时候引入即可。视频平台提供了这样的功能，方便我们引入。

以 youku 和 bilibili 为例。

优酷：上传完成后点看想要用的视频，鼠标放到分享按钮，会弹出一些选项，点击“复制通用代码”（优酷）、“复制嵌入代码” （bilibili）将代码粘贴到我们自己的html页面中即可。

bilibili：

代码：

<!DOCTYPE html> <!-H5标准->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body> 
   <h1>引入视频：：：</h1>
    <iframe src="//player.bilibili.com/player.html?aid=586241270&bvid=BV13z4y1S7dB&cid=281386260&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="500" height="500"> </iframe>
</body>
</html>

效果：