首页 > 其他分享 >【Video标签的详细使用及案例介绍,看完通透直接学会!】

【Video标签的详细使用及案例介绍,看完通透直接学会!】

时间:2024-12-31 17:54:36浏览次数:8  
标签:视频 通透 标签 video 视频文件 Video 播放 属性

前言

好久没更新了,最近工作上项目比较忙,在2024年的最后一天给大家分享一下近期项目所遇到的问题的一些分享

一、video标签

video标签是HTML5的标签,表示视频嵌入元素,video元素用于在文档中嵌入媒体播放器,用于支持文档内的视频播放。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/videoicon-default.png?t=O83Ahttps://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

简单介绍一下常用的几种属性,有兴趣的可以去官方文档了解

src属性

指定视频文件的 URL,可以是相对路径或绝对路径。也可以是网络地址。

controls属性

显示视频控件(播放、暂停、音量、全屏等),如果不需要展示控件,不写此属性也可,也可以通过CSS样式控制。

     video::-webkit-media-controls-enclosure {
      display: none;
    } 

autoplay属性

视频文件在页面加载完成后自动播放。(在大部分浏览器都默认设置了禁止自动播放,特别是移动设备)

loop属性

视频文件播放结束后自动重新播放。

muted属性

初始加载时将视频设置为静音。

preload

标签:视频,通透,标签,video,视频文件,Video,播放,属性
From: https://blog.csdn.net/m0_60623820/article/details/144847100

相关文章

  • 高分二号标签样本库(GF2-Label)重磅上线!
    高分二号标签样本库(GF2-Label)正式上线啦!本样本库包含150景高分二号影像及分类标签数据,可以作为深度学习模型训练的样本数据库。样本库特点高分二号标签样本库具有如下特点:统一的数据类型所有影像均经过统一的2%线性拉伸方式转为Byte字节型。具有通用性的波段数量影像底......
  • 使用meter标签制作一个密码强度效果
    在HTML5中,<meter>标签用于表示一个范围内的数值。这可以用于展示密码强度,其中数值可以代表密码的复杂性或安全性。下面是一个简单的示例,展示了如何使用<meter>标签来制作一个密码强度效果:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname=......
  • WPF play video via VideoDrawing and DrawingImage
    usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;usingSystem.Windows;usingSystem.Windows.Controls;usingSystem.Windows.Data;usingSystem.Windows.Documents;usingSystem.Windows.Input;......
  • 5 steps teach you shoot professional short videos
    5stepsteachyoushootprofessionalshortvideosWanttomakegreatvideos?Thesearetheskillsyouneedtomaster!Thesuggestionslistedinthisarticleareusedbypeople.They’vebeenproventowork,solet’sgetstarted.文章目录5stepsteac......
  • html中<script> 标签中type值及其含义
    在HTML中的script标签中,type属性用于指定脚本的MIME类型,也即告诉浏览器该如何解释和处理脚本的内容。常用的type值以及它们的含义如下:1.type=“text/javascript”含义:指定脚本是JavaScript类型。这是早期的标准方式,现代浏览器默认都会将script标签中的内容当作J......
  • CDS标准视图:功能位置可用标签 I_FUNCNLLOCALTERNATIVELABEL
    视图名称:功能位置可用标签I_FUNCNLLOCALTERNATIVELABEL视图类型:基础视图代码:点击查看代码@EndUserText.label:'FunctionalLocationAlternativeLabels'@VDM.viewType:#BASIC@AccessControl.authorizationCheck:#CHECK@AbapCatalog.sqlViewName:'IFUNCTLOCALTLBL'......
  • 浏览器2个标签页面如何通信,传递数据
    在Vue应用中,使用postMessage方法可以在两个不同的浏览器标签页之间进行通信。下面是一个简单的示例,展示如何在两个标签页之间发送和接收消息。发送消息的标签页(Sender)假设这是第一个标签页,我们将在这个标签页中发送消息到另一个标签页。<!--src/views/pageH/index.vue--><te......
  • video-analyzer:开源视频分析工具,支持提取视频关键帧、音频转录,自动生成视频详细描述
    ❤️如果你也关注AI的发展现状,且对AI应用开发非常感兴趣,我会每日跟你分享最新的AI资讯和开源应用,也会不定期分享自己的想法和开源实例,欢迎关注我哦!......
  • 标签页自动休眠谷歌插件
    一、PauseTab插件的安装1、下载插件并解压2、打开谷歌浏览器,在地址栏输入“chrome://extensions/”进入扩展程序页面.3、开启页面右上角的“开发者模式”.4、点击“加载已解压的扩展程序”按钮,选择之前解压的文件夹,点击“选择文件夹”即可安装二、PauseTab插件......
  • vue自定义标签模板
    resume-template参考博客https://blog.csdn.net/yangyiboshigou/article/details/72239844参考代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><titl......