当前位置: 首页 > news >正文

html怎么插入视频?视频如何插入页面

html怎么插入视频?视频如何插入页面

HTML 的功能强大,基本所有的静态效果都可以在此轻松呈现,各种视频网站内有大量的视频内容,本篇文章教你如何在 html 中插入视频

代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>video - 编程狮(w3cschool.cn)</title>
<style>
</style>
</head>
<body><video width="320" height="240" controls><source src="/statics/demosource/movie.mp4"  type="video/mp4"><source src="/statics/demosource/movie.ogg"  type="video/ogg">您的浏览器不支持 HTML5 video 标签。</video>
</body>
</html>

标签定义和使用说明

<video>​标签定义视频,类似电源片段和其他视频流。

<video>​目前为止支持三种视频格式:Ogg、WebM、MP4

浏览器MP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYES
从 Firefox 21 版本开始
Linux 系统从 Firefox 30 开始
YESYES
SafariYESNONO
OperaYES
从 Opera 25 版本开始
YESYES

<video>可选属性

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted如果出现该属性,视频的音频输出为静音。
posterURL规定视频正在下载时显示的图像,直到用户点击播放按钮。
preloadauto
metadata
none
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
srcURL要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

以上就是小编为您带来的html中如何插入视频的全部内容。

http://www.lryc.cn/news/132976.html

相关文章:

  • 游戏服务端性能测试
  • 【使用Zookeeper当作注册中心】自己定制负载均衡常见策略
  • 设计模式十七:迭代器模式(Iterator Pattern)
  • Python制作爱心并打包成手机端可执行文件
  • 使用docker-compose.yml快速搭建开发、部署环境(nginx、tomcat、mysql、jar包、各种程序)以及多容器通信和统一配置
  • 管理类联考——逻辑——真题篇——按知识分类——汇总篇——二、论证逻辑——支持加强——第三节——分类3——类比题干支持
  • 搜索旋转排序数组
  • Steam搬砖项目:最长久稳定的副业!
  • 最小化安装移动云大云操作系统--BCLinux-R8-U8-Server-x86_64-230802版
  • 神经网络基础-神经网络补充概念-05-导数
  • kubernetes — 安装Ingress
  • SSR使用HTTPS
  • Spring Boot中使用validator如何实现接口入参自动检验
  • thinkphp 5 实现UNION ALL 3个联表查询,并且带上搜索条件,名称,时间,手机号
  • React 之 Router - 路由详解
  • 框架分析(1)-IT人必须会
  • 前端面试的游览器部分(7)每天10个小知识点
  • 认识Junit
  • Unity C# 引用池 ReferencePool
  • opencv 进阶10-人脸识别原理说明及示例-cv2.CascadeClassifier.detectMultiScale()
  • 〔013〕Stable Diffusion 之 图片自动评分和不健康内容过滤器 篇
  • 6.RocketMQ之消费索引文件ConsumeQueue
  • Appium-移动端自动测试框架,如何入门?
  • 复数混频器、零中频架构和高级算法开发
  • Web 拦截器-interceptor
  • Java进阶(4)——结合类加载JVM的过程理解创建对象的几种方式:new,反射Class,克隆clone(拷贝),序列化反序列化
  • 扩散模型实战(四):从零构建扩散模型
  • YOLOv5、YOLOv8改进:S2注意力机制
  • LeetCode 542. 01 Matrix【多源BFS】中等
  • 使用open cv进行角度测量