插入视频音频

最新推荐文章于 2024-07-31 14:35:30 发布

是超大号怪兽

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量156

点赞数

分类专栏：基础前端文章标签：音视频前端

本文链接：https://blog.csdn.net/qq_43633879/article/details/124760422

版权

基础前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

插入视频音频：

HTML代码：

<!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>插入声音视频</title>
</head>
<h4>用embed插入视频或者音频</h4>
     <!--可用相对路径和绝对路径法上传-->
<embed src="yp.mp3"></embed>
<embed src="sp.mp4"></embed><br/>

<h4>用audio插入有音频</h4>
    <!--audio元素支持三种音频格式：Ogg Vorbis、MP3、Wav-->
<audio src="yp.mp3" autoplay controls></audio>2<br/>
<audio controls autoplay>
    <source  src="yp.mp3" /> 
    <source  src="music.ogg" />   <!--当MP3格式不支持播放时播放Ogg格式 -->  
     您的浏览器不支持播放声音      <!--当MP3与Ogg格式不支持播放时播放显示这句话-->  
</audio> <br/>
    <!--autoplay:自动播放;controls:是否显不默认播放控件（声音的进程，音量）;
     loop:循环播放,loop = 2就是循环2次(唱两次),loop或者loop = "-1":无限循环;-->

<h4>用video插入视频</h4>
<video src="yp.mp3" autoplay controls width="500" height="50"></video> 3<br/>
    <!--autoplay:自动播放;controls:是否显示默认播放控件;loop:循环播放;
      width:设置播放窗口宽度;height:设置播放窗口的高度-->
    <!--video支持 ogg mp4 webM 三种视频格式 -->
<video controls autoplay width="200" height="130">
<source src="sp.mp4" />
<source src="movie04.ogg"/>      <!--当MP3格式不支持播放时播放Ogg格式 --> 
您的浏览器不支持视频播放        <!--当MP3与Ogg格式不支持播放时播放显示这句话-->
</video>
</body>

</html>

页面效果

在这里插入图片描述

是超大号怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
插入视频音频

插入视频音频：HTML代码：<!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">
复制链接

扫一扫