视频的多种方式

Dell的蓝屏警告

已于 2023-02-20 11:27:28 修改

阅读量785

点赞数

文章标签：前端视频

于 2023-02-20 11:19:42 首次发布

本文链接：https://blog.csdn.net/qq_55002615/article/details/129119503

版权

本文介绍了HTML中video标签的使用，包括属性如src、poster、autoplay等，以及如何处理视频的控制和显示。同时，讲解了a标签用于链接跳转的属性，如href和target，以及如何结合使用实现视频播放。此外，还提到了iframe标签用于嵌入外部网页，如视频播放器，调整iframe的宽高和边框等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用video标签

<video class="video-js" src="" poster="" autoplay="true" loop="true" >
    <source src="" type="video/mp4">
</video>

1.1常用属性：

src中添加视频路径，嵌入到页面视频的url;

也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频;

poster中是视频播放前显示的封面；

auto优加载此视频；

autoplay添加此属性，网页进入时直接播放此视频（布尔值）；

loop可以理解为无限环播放（布尔值）；

muted默认视频静音（布尔值）；

controls允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放;

x5-video-player-type="h5" 启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放

x5-video-player-fullscreen="true" 全屏设置（布尔值）

......

1.2在video中添加的文本内容，可以在浏览器对此元素不兼容时显示出来；

1.3视频禁止点击暂停

video{
    pointer-events: none;
}

2、使用a标签添加链接跳转

 <a href='url地址' target='页面打开的方式'>  页面元素(文字、图像、音频、视频)  </a>

2.1属性

href:值是要跳转的页面的地址,通常用'#'表示空链接

target:新页面打开的方式

取值：

'_self'：表示在原窗口打开页面（默认值）

'_blank'：表示在新窗口中打开页面

href="javascript":阻止a标签的默认行为

2.2点击按钮弹框式播放视频

<a class=" video-popup mfp-iframe" tabindex="0" href="https://shopsource.singoo.cc/39/video/HTfKTnbbTaPWXtC8.mp4" target="_self">
                        <svg t="1636454369631" class="icon spr-edit-el" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8252" width="24" height="24">
                            <path d="M870.2 466.333333l-618.666667-373.28a53.333333 53.333333 0 0 0-80.866666 45.666667v746.56a53.206667 53.206667 0 0 0 80.886666 45.666667l618.666667-373.28a53.333333 53.333333 0 0 0 0-91.333334z" fill="#ffffff" p-id="8253"></path>
                        </svg>
                    </a>

svg是一个视频播放图标，可以自定义css修改

href中添加视频链接,添加页面打开方式为新开页面

2.3点击a标签新开页面视频播放

<a href="视频链接" target="_self"></a>

href中添加视频链接，点击a标签时新开页面显示此视频进行播放

3、使用iframe标签——嵌入

<iframe style="border: 3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>