首页 前端知识 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

2024-01-26 10:01:57 前端知识 前端哥 355 866 我要收藏

文章目录

  • 一、HTML5 视频标签 video
  • 二、视频标签 video 代码示例
    • 1、基本示例
    • 2、修改视频尺寸
  • 三、视频标签 video 配置多个格式视频代码示例





一、HTML5 视频标签 video



HTML 5 的 <video> 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ;

  • IE 浏览器 :
    • 9.0 以上版本支持 mp4 格式 ;
  • Firefox 浏览器 :
    • 3.5 以上版本支持 ogg 格式 ;
    • 4.0 以上版本支持 webM 格式 ;
  • Opera 浏览器 :
    • 10.5 以上版本支持 ogg 格式 ;
    • 10.6 以上版本支持 webM 格式 ;
  • Chrome 浏览器 :
    • 5.0 以上支持 ogg / mp4 格式 ;
    • 6.0 以上支持 webM 格式 ;
  • Safari 浏览器 :
    • 3.0 以上支持 mp4 格式 ;

可以在 <video> 视频标签 中 放 ogg 和 mp4 两种格式的视频 , 所有的浏览器都可以播放视频 ;


如果浏览器的版本太老 , 什么格式都不支持 ;


视频标签 video 语法格式 :

<video src="url地址" controls="controls"></video>

在这里插入图片描述

视频标签 video 属性简介 :

  • controls 属性 : 值为 controls , 启用控制按钮 , 由于在不同的浏览器中表现不同 , 一般情况下 , 不显示控制按钮 ;
  • autoplay 属性 : 值为 autoplay , 在 Chrome 浏览器中 禁用自动播放 , 其它浏览器不禁用自动播放 ;
    • 如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
  • muted 属性 : 值为 muted , 将视频设置为静音播放 ;
    • 如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
  • width 属性 : 值为像素值 , 设置播放器宽度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
  • height 属性 : 值为像素值 , 设置播放器高度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
  • loop 属性 : 值为 loop , 设置播放器循环播放 ;
  • poster 属性 : 值为 图片 url 路径 , 设置视频位置等待加载时的图片 ;
  • preload 属性 :
    • 设置 auto , 表示 预先加载视频 ;
    • 设置 none , 表示 不预先加载视频 ;




二、视频标签 video 代码示例




1、基本示例


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 视频标签示例</title>
    <style>

    </style>
</head>

<body>
    <video src="media/fengjing.mp4" controls="controls"></video>
</body>

</html>

执行结果 :

  • 默认状态 :
    在这里插入图片描述

  • 播放视频后效果 :

在这里插入图片描述


2、修改视频尺寸


通过修改 video 标签的宽度 , 修改视频尺寸 ;

        video {
            width: 400px;
        }

修改后的代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 视频标签示例</title>
    <style>
        video {
            width: 400px;
        }
    </style>
</head>

<body>
    <video src="media/fengjing.mp4" controls="controls"></video>
</body>

</html>

显示效果 :
在这里插入图片描述





三、视频标签 video 配置多个格式视频代码示例



代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 视频标签示例</title>
    <style>
        video {
            width: 400px;
        }
    </style>
</head>

<body>
    <!-- 浏览器加载页面 , 发现 video 标签
         读取该 video 标签 , 发现第一个 source 字标签 , 该标签配置 mp4 视频文件
          - 如果浏览器支持 mp4 就播放该 mp4 文件
          - 如果不支持 mp4 格式 , 则继续读取下一行 
         第二个 source 标签配置的是 ogg 格式的视频文件 
          - 如果浏览器支持 ogg 就播放该 ogg 文件
          - 如果不支持 ogg 格式 , 则继续读取下一行  显示提示信息 -->
    <video autoplay="autoplay" muted="muted" loop="loop" poster="media/pig.jpg">
        <source src="media/fengjing.mp4" type="video/mp4" />
        <source src="media/fengjing.ogg" type="video/ogg" />
        很抱歉 , 当前浏览器不支持现有视频格式 ~
    </video>
</body>

</html>

执行结果 :

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/430.html
评论
发布的文章

CSS3新增样式

2024-02-05 11:02:24

jQuery的介绍

2024-02-05 11:02:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!