制作含有音频、视频的网页

参考代码如下

html 复制代码
<!DOCTYPE html>
<html>
<head>
	<title>视频音乐网页</title>
</head>
<body>
	<!-- 视频 -->
	<video width="320" height="240" controls>
		<source src="movie.mp4" type="video/mp4">
		<source src="movie.ogg" type="video/ogg">
		Your browser does not support the video tag.
	</video>
	<!-- 音乐 -->
	<audio controls>
		<source src="music.mp3" type="audio/mpeg">
		<source src="music.ogg" type="audio/ogg">
		Your browser does not support the audio tag.
	</audio>
	<!-- JavaScript -->
	<script>
		// 播放音乐
		var audio = new Audio('music.mp3');
		audio.play();
		// 播放视频
		var video = document.getElementsByTagName('video')[0];
		video.play();
	</script>
</body>
</html>

使用了'<video>'和'<audio>'标签来嵌入视频和音乐。controls属性可以让用户控制媒体的播放、暂停、音量等。如果浏览器不支持HTML5的视频和音频标签,我们可以在标签中添加元素,提供多个格式的媒体文件,以便浏览器选择最适合的格式进行播放。

在JavaScript中,我们可以使用Audio和Video对象来控制音乐和视频的播放。在上面的示例中,我们使用了new Audio()创建了一个音乐对象,并使用play()方法播放音乐。同样地,我们使用document.getElementsByTagName('video')获取了页面中的第一个视频元素,并使用play()方法播放视频。
菜鸟教程视频标签介绍
菜鸟教程音乐标签介绍

相关推荐
Antonio9151 小时前
【音视频】WebRTC 中的RTP、RTCP、SDP、Candidate
音视频·webrtc
且随疾风前行.4 小时前
在安卓中使用 FFmpegKit 剪切视频并添加文字水印
android·音视频
开开心心就好19 小时前
专业鼠标点击器,自定义间隔次数
javascript·安全·计算机外设·excel·音视频·模拟退火算法
却道天凉_好个秋1 天前
音视频学习(四十七):模数转换
音视频
DogDaoDao1 天前
WebRTC前处理模块技术详解:音频3A处理与视频优化实践
音视频·webrtc·实时音视频·视频增强·视频前处理·3a算法·音频前处理
却道天凉_好个秋1 天前
音视频学习(五十):音频无损压缩
音视频·无损压缩
雪域迷影1 天前
使用AssemblyAI将音频数据转换成文本
java·音视频·restapi·gson·assemblyai
木卯_THU1 天前
TGD第九篇:三维应用——视频边缘检测
计算机视觉·音视频·边缘检测·遮挡检测·tgd·视频内容理解·视频边缘检测
xduryan1 天前
1 - 视频处理IP核之Video In to AXI4-Stream
fpga开发·音视频
驭风少年君1 天前
【视频内容创作】PR的关键帧动画
音视频·pr·视频剪辑·关键帧·内容创作