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

参考代码如下

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()方法播放视频。
菜鸟教程视频标签介绍
菜鸟教程音乐标签介绍

相关推荐
kaixin_啊啊9 小时前
突破限制:Melody远程音频管理新体验
音视频
ai产品老杨10 小时前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
MThinker10 小时前
02-Media-8-uvc_with_csc.py 使用硬件解码的USB摄像头(UVC)捕获视频并显示的程序
音视频·智能硬件·micropython·canmv·k230
向阳花开_miemie11 小时前
Android音频学习(十八)——混音流程
学习·音视频
清风66666621 小时前
基于STM32的APP遥控视频水泵小车设计
stm32·单片机·mongodb·毕业设计·音视频·课程设计
Cary丿Xin1 天前
Luma 视频生成 API 对接说明
音视频
奔跑吧 android1 天前
【车载audio开发】【基础概念1】【音频基础概念通俗讲解】
音视频·channel·audio·aosp·frame·period_size
小狮子安度因2 天前
ffplay音频重采样
ffmpeg·音视频
张晓~183399481212 天前
短视频矩阵源码-视频剪辑+AI智能体开发接入技术分享
c语言·c++·人工智能·矩阵·c#·php·音视频
GilgameshJSS2 天前
【学习K230-例程23】GT6700-音频FFT柱状图
python·学习·音视频