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

朴灿烈づ我的快乐病毒、 2023-01-05 14:23 148阅读 0赞

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

以 youku 和 bilibili 为例。

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI_size_16_color_FFFFFF_t_70][]

bilibili：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI_size_16_color_FFFFFF_t_70 1][]

代码：

<!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>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI_size_16_color_FFFFFF_t_70]: /images/20221119/287b4478a3194e5db35a950bed8b5dc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210113091200963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210113091653518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI=,size_16,color_FFFFFF,t_70