通过案例来了解响应式开发(HTML,CSS)的视频控件

news2024/11/28 0:50:17

目录

前言

一、视频控件的使用方法

1.语法

二、部分属性

 二、案例举例

三、播放效果


前言

1.本文讲解的响应式开发技术(HTML5+CSS3+Bootstrap)的HTML5表单等功能方法的代码,这也是很多教材的一个典型案例;

2.本文将讲解涉及到HTML5表单等功能方法的知识点,其它方面会大致讲一下;

3.本代码是使用visual Studio Code编写的,其他软件如DW,HBX等都是可以的;

4.运行浏览器是谷歌,同时推荐使用谷歌浏览器;

5.这个案例是我上学跟老师所讲做出来的,有些地方不是很完美,请见谅也请多赐教;


提示:以下是本篇文章正文内容,下面案例可供参考

一、视频控件的使用方法

1.语法

<video src="视频文件路径” controls="controls">

视频控件的使用方法

</video>

二、部分属性

<video>的部分属性
属性名称参数说明
src(url)表示播放视频的URL地址
width/height表示视频播放器的宽度和高度
muted表示视频播放时被静音
autoplay表示视频即刻播放

 二、案例举例

代码如下,仅供参考:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>video视频控件</title>
</head>
<body>
  <video src="video/ln.mp4" controls>
    这是一个简单的播放视频控件,播放的内容是“中国·辽宁”宣传片
  </video>
</body>

</html>

以上便是video本地视频播放的代码,这是一个本地视频资源,视频来源于网络,若侵权,请联系删除。

三、播放效果

运行如下,仅供参考:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/423428.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

腾讯轻联测试预览报错怎么办?

在腾讯轻联配置过程中&#xff0c;经常遇到测试预览失败的报错。首先我们整体介绍一下【测试预览】的作用。增加【测试预览】的节点的作用主要有两个&#xff1a; ● 第一个作用是为了保证我们应用连接能通畅&#xff0c;可以获取到数据&#xff0c;避免后续由于设置问题&…

IntelliJ IDEA安装及jsp开发环境搭建

一、前言 现在.net国内市场不怎么好&#xff0c;公司整个.net组技术转型&#xff0c;就个人来说还是更喜欢.net&#xff0c;毕竟不是什么公司都像微软一样财大气粗开发出VS这样的宇宙级IDE供开发者使用&#xff0c;双击sln即可打开项目&#xff0c;一直想吐槽为嘛java项目只能i…

Docker Registry 本地镜像发布到私有库

本地镜像发布到私有库流程 是什么1 官方Docker Hub地址&#xff1a;https://hub.docker.com/&#xff0c;中国大陆访问太慢了且准备被阿里云取代的趋势&#xff0c;不太主流。2 Dockerhub、阿里云这样的公共镜像仓库可能不太方便&#xff0c;涉及机密的公司不可能提供镜像给公…

【Spring Security】 入门实战

文章目录一、基本概念二、Spring Security第一个程序三、Spring Security没有生效四、修改默认账号密码&#xff08;appliction.yml&#xff09;五、修改默认账号密码&#xff08;配置类&#xff09;六、Spring Security的三个configure方法七、Spring Security的三种身份的验证…

Android 面试—深入理解Android类加载机制

前言 任何一个java程序都是由一个或者多个class文件组成&#xff0c;在程序运行时&#xff0c;需要将class文件加载到JVM中才可以使用&#xff0c;负责加载这些class文件的就是java的类加载机制。ClassLoader的作用简单的来说就是加载class文件&#xff0c;提供给程序运行时使…

结构体联合体sizeof内存求值 - 对齐数

讲解下struct和union的内存求值和对齐 以题目讲解 结构体联合体sizeof内存求值 - 对齐数不同位数下类型字节大小内存对齐规则struct 内存对齐求值嵌套struct内存对齐求值union的内存大小求值union大小计算准则struct嵌套union内存对齐求值不同位数下类型字节大小 一定要搞清楚…

【机器学习】P18 反向传播(导数、微积分、链式法则、前向传播、后向传播流程、神经网络)

反向传播反向传播反向传播中的数学导数与python链式法则简单神经网络处理流程从而理解反向传播神经网络与前向传播神经网络与反向传播反向传播 反向传播&#xff08;back propagation&#xff09;是一种用于训练神经网络的算法&#xff0c;其作用是计算神经网络中每个参数对损…

【Java虚拟机】JVM核心基础和常见参数实战

1.新版JVM内存组成部分和堆空间分布 JVM内存的5大组成&#xff08;基于JDK8的HotSpot虚拟机&#xff0c;不同虚拟机不同版本会有不一样&#xff09; 名称作用特点程序计数器也叫PC寄存器&#xff0c;用于记录当前线程执行的字节码指令位置&#xff0c;以便线程在恢复执行时能…

常见的DNS攻击与相应的防御措施

DNS查询通常都是基于UDP的&#xff0c;这就导致了在查询过程中验证机制的缺失&#xff0c;黑客很容易利用该漏洞进行分析。DNS服务可能面临如下DNS攻击风险&#xff1a; 黑客伪造客户端源IP地址发送大量的DNS请求报文&#xff0c;造成DNS request flood攻击。 黑客伪造成授权服…

MongoDB实现---存储机制

储存 GridFS机制 GridFS&#xff1a;将大文件分隔成多个小文档存放&#xff0c;这样我们能够有效的保存大文档&#xff0c;而且解决了BSON对象有限制的问题&#xff1b;通过两个集合实现&#xff1a;两个集合分别存储存储实际数据和存储文件的元数据&#xff1a; 元数据文件&…

一篇文章搞定《动手学深度学习》-(李沐)PyTorch版本的所有内容

目录 目录 简介 阅读指南 1. 深度学习简介 2. 预备知识 3. 深度学习基础 4. 深度学习计算 5. 卷积神经网络 6. 循环神经网络 7. 优化算法 8. 计算性能 9. 计算机视觉 10. 自然语言处理 环境 参考&#xff08;大家可以在这里下载代码&#xff09; 原书地址&#…

四结(4.13)多线程学习

今天又进行了一次学长授课&#xff0c;关于MySQL和JDBC本来学了增删查改操作&#xff0c;用IDEA也可以操作数据库&#xff0c;今天讲了一些数据库的规范&#xff08;三大范式&#xff09;、以及er图。了解了一下项目。 项目要分为客户端和服务端&#xff08;C/S&#xff09;来写…

vue面试题2023

1.$route和$router的区别? routes : 数组。 路由匹配规则 router &#xff1a; 对象。 路由对象 $router &#xff1a; 对象。 用于跳转路由 和 传递参数 $route &#xff1a;对象。 用于接收路由跳转参数 1.Vue的生命周期方法有哪些&#xff1f; - beforeCreate 初始化实…

科技云报道:“云减碳”成趋势,如何用“计算”帮助企业碳减排?

科技云报道原创。 将数据中心“丢进”水里、“扔进”山里&#xff0c;使用风能、太阳能等清洁能源为数据中心供电……这些都是通过物理方法为数据中心减碳。 数据中心的重要工作在于计算&#xff0c;计算导致了能源消耗&#xff0c;使其成为耗能大户&#xff0c;而通过云计算…

基于imx8m plus开发板全体系开发教程1:Windows/Linux 开发环境配置(连载中)

前言&#xff1a; i.MX8M Plus 开发板是一款拥有 4 个 Cortex-A53 核心&#xff0c;运行频率 1.8GHz;1 个 Cortex-M7 核心&#xff0c;运行频率 800MHz;此外还集成了一个 2.3 TOPS 的 NPU&#xff0c;大大加速机器学习推理。 全文所使用的开发平台均为与NXP官方合作的FS-IMX8…

Terraform 系列-什么是 IaC?

系列文章 &#x1f449; Terraform 系列文章 前言 聊到 Terraform, 必然绕不开 IaC 这个概念&#xff1f;那么&#xff0c;什么是 IaC? &#x1f914; 基本概念 基础架构即代码 (Infrastructure as Code, IaC) 是指通过代码而不是手动流程/控制台点击来管理和配置基础架构…

互联网+制造业:图扑数字孪生智慧工厂车间生产线

前言 随着信息技术、自动化技术和人工智能等技术的快速发展和应用&#xff0c;智能制造已成为全球制造业发展的主流趋势。智能制造是将智能化、自动化、数字化和网络化等技术手段运用到制造过程中&#xff0c;使生产过程具有高度智能化、自动化和数字化的特点&#xff0c;进而…

Linux安装宝塔,并实现公网远程登录宝塔面板【内网穿透】

文章目录前言1. 安装宝塔2. 安装cpolar内网穿透3. 远程访问宝塔4. 固定http地址5. 配置二级子域名6. 测试访问二级子域名转发自CSDN远程穿透的文章&#xff1a;Linux安装宝塔&#xff0c;并实现公网远程登录宝塔面板【内网穿透】 前言 宝塔面板作为建站运维工具&#xff0c;它…

网络编程2(套接字编程)

套接字编程UDP协议通信&#xff1a;TCP通信&#xff1a;套接字编程&#xff1a;如何编写一个网络通信程序 1.网络通信的数据中都会包含一个完整的五元组&#xff1a; sip&#xff0c;sport&#xff0c;dip&#xff0c;dport&#xff0c;protocol&#xff08;源IP&#xff0c;源…

计算机组成原理——第三章存储系统(上)

提示&#xff1a;吾与春风皆过客&#xff0c;君携秋水揽星河 文章目录前言3.1 存储系统基本概念3.2.1 主存储器的基本组成3.2.2 SRAM DRAM\3.2.3 只读存储器ROM3.3.1 主存储器与CPU的连接3.3.2 双端口RAM和多模块存储器前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c…