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

参考代码如下

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

相关推荐
iphone1083 小时前
视频创作者如何用高级数据分析功能精准优化视频策略
大数据·数据挖掘·数据分析·音视频·视频功能·视频创作者
yuanpan5 小时前
OpenCV打开视频函数VideoCapture使用详解
人工智能·opencv·音视频
花开莫与流年错_1 天前
音频相关数学支持
数学·音视频·音频·软件
嘀咕博客2 天前
Krea Video:Krea AI推出的AI视频生成工具
人工智能·音视频·ai工具
计算机视觉-Archer2 天前
联想win11笔记本音频失效,显示差号(x)
音视频
瑶光守护者2 天前
【卫星通信】超低码率语音编码ULBC:EnCodec神经音频编解码器架构深度解析
深度学习·音视频·卫星通信·语音编解码·ulbc
枫叶梨花3 天前
从 M4S 到 MP4:用 FFmpeg 轻松合并音视频文件
ffmpeg·音视频
胖虎13 天前
(二十一)深入了解AVFoundation-编辑:导出视频与格式转换的全流程
音视频·音视频导出·音视频格式转换
奋斗的小羊羊4 天前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
跨界混迹车辆网的Android工程师4 天前
HEVC(H.265)与HVC1的关系及区别
音视频·h.265