码迷,mamicode.com
首页 > Web开发 > 详细

HTML —— video标签

时间:2019-11-18 22:11:16      阅读:631      评论:0      收藏:0      [点我收藏+]

标签:调用   因此   mpeg4   span   结果   介绍   pix   播放器   网页   

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 设置视频播放器的宽度。

HTML —— video标签

标签:调用   因此   mpeg4   span   结果   介绍   pix   播放器   网页   

原文地址:https://www.cnblogs.com/Nlifea/p/11885619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!