zoukankan      html  css  js  c++  java
  • 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 设置视频播放器的宽度。
  • 相关阅读:
    C#日期与时间
    使用IIS部署WebDAV
    永久有效,最新IntelliJ IDEA 2021.1.1激活破解教程,亲测有效
    LNC(宝元)机床的IP设置和数据采集
    KND(凯恩帝)机床的IP设置
    国密算法SM1-SM4简介
    WPF中根据数据展示不同UI控件的做法
    WPF中ListView滚动到当前行的几种方法
    WPF中对于异步返回的绑定
    .net类库名称空间冲突怎么办?
  • 原文地址:https://www.cnblogs.com/Nlifea/p/11885619.html
Copyright © 2011-2022 走看看