html中音频与视频基础属性设置

最新推荐文章于 2024-09-09 11:08:24 发布

Tea-pd

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量549

点赞数 3

文章标签： vue.js 学习 html css3 html5

本文链接：https://blog.csdn.net/tea_tea_/article/details/125363492

版权

前言：本人是新生小白，如有错误之处欢迎指出

我们先写一个基础框架

<!DOCTYPE html>
<html>
<head>
    <title>音频与视频</title>
</head>
<body>
    
</body>
</html>

我们先写视频

 <!-- 这是第一种写法 -->
    <video src="./1.mp4" controls loop></video>
    <!-- 这是第二种写法 这样写多个视频格式可防止部分浏览器不支持某一种格式-->
    <video>
        <source src="./1.avi">
        <source src="./1.mp4">
    </video>

现在再来写音频，音频原理与视频一样

 <!-- 同理，音频也是如此 -->
    <!-- 这是第一种写法 -->
    <audio src="./1.mp3" controls loop></audio>
    <!-- 这是第二种写法 这样写多个视频格式可防止部分浏览器不支持某一种格式-->
    <audio  controls loop>
        <source src="./1.avi">
        <source src="./1.mp4">
    </audio>

其中controls代表用户是否自己控制视频播放与否，loop是循环播放，autoplay是自动播放但这个属性会让用户使用舒适度降低，大部分浏览器已经不支持此属性

最终样式

<!DOCTYPE html>
<html>
<head>
    <title>音频与视频</title>
</head>
<body>
    <!-- 这是第一种写法 -->
    <video src="./1.mp4" controls loop></video>
    <!-- 这是第二种写法 这样写多个视频格式可防止部分浏览器不支持某一种格式-->
    <video controls loop>
        <source src="./1.avi">
        <source src="./1.mp4">
    </video>
 
    <!-- 同理，音频也是如此 -->
    <!-- 这是第一种写法 -->
    <audio src="./1.mp3" controls loop></audio>
    <!-- 这是第二种写法 这样写多个视频格式可防止部分浏览器不支持某一种格式-->
    <audio  controls loop>
        <source src="./1.avi">
        <source src="./1.mp4">
    </audio>
    
</body>
</html>