HTML —— video标签

video

调用方法

<video src="">
</video>

用途往网页里面添加视频

在里面添加

controls="controls"

结果是这样的

<video src="movie.ogg" controls="controls">
</video>

最后的结果里面会出现进度条和播放暂停键

我们还可以增加width和height属性定义播放框的大小

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

里面的文字是视频没有加载出来的或者加载失败的时候显示出来的

因为浏览器的多种多样所以视频的样式有很多因此我们要制定很多播放源这时候就是这样的

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>
      Document
    </title>
  </head>
  <body>
    <video id="video1" height="240" width="320" controls="controls">
      <source src="/ext/video.mp4" type="video/mp4">
      <source src="/ext/video.ogg" type="video/ogg">
    </video>
  </body>
</html>
复制代码

里面的source标签可以添加许多新的源

例如ogg文件适用于chrome,firefox,以及opera

而要是想要在safari浏览器上运行则需要MPEG4格式的文件,这样的话我们就需要更改文件的格式并且加上source标签

还剩下一部分属性放在表格里面介绍

 

属性描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
posted @   Nlifea  阅读(879)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
点击右上角即可分享
微信分享提示