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 设置视频播放器的宽度。
  • 相关阅读:
    What version of .NET Framework is integrated into what version of OS?
    《千字文》古今第一文,1000字无重复,囊括各个方面的知识!
    这些习惯正在阻碍你的成长(你正在做。。。)
    百家讲坛另附笔记
    百家讲坛之曾国藩笔记
    《挪威的森林》经典语录
    《悲伤逆流成河》台词摘抄
    2018年11月29日,晴
    关于描述的一些感悟
    2018年11月27日, 晴
  • 原文地址:https://www.cnblogs.com/Nlifea/p/11885619.html
Copyright © 2011-2022 走看看