首先是音频：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播放音频</title>
</head>
<body>
<!--将 mp3文件复制到新创建的raw文件夹下-->
<audio src="raw/1.mp3" controls="controls">您的浏览器不支持</audio>
<button onclick="clickA()">播放/暂停</button>
<script>
var a = document.getElementById("audio");
function clickA(){
if (a.paused){
a.play();
}else {
a.pause;
}
}
</script>
</body>
</html>然后是视频：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频播放</title>
</head>
<body>
<button onclick="clickV()">播放/暂停</button>
<button onclick="clickBig()">放大</button>
<button onclick="clickSmall()">缩小</button>
<br/>
<!--<video src="raw/3.mp4" controls="controls"> -->
<!--<!–由于有的浏览器不支持.mp4格式的视频,因此需要添加资源库–>-->
<!--<source src="raw/3.mp4">-->
<!--<source src="raw/3.mp4">-->
<!--您的浏览器不支持</video>-->
<!--上方是使用系统默认的控制器来播放视频,我们也可以进行自定义-->
<video id="video">
<source src="raw/3.mp4">
<source src="raw/3.mp4">
您的浏览器不支持</video>
<script>
var v = document.getElementById("video");
function clickV(){
if (v.paused){
v.play();
}else {
v.pause();
}
}
function clickBig(){
v.width = 800;
v.height = 800;
}
function clickSmall(){
v.width = 300;
v.height = 300;
}
</script>
</body>
</html>要注意的是，不同的浏览器支持的视频格式有所不同，我们需要使用转码工具进行视频的转码：这里使用ffmpeg:
使用方法：（个人总结）：
视频转码工具-ffmpeg的使用
下载地址：ffmpeg.org
在OS系统下选择编译过的客户端（builds XXXX for OS X and above ），然后下载
这里以将视频名为1.mp4转换为1.ogg格式为例
步骤：（在终端中的操作）
1，打开ffmpeg的文件所在位置：
cd+空格+文件所在文件夹地址（切记，是上一层文件夹的位置）
2，然后输入命令：./ffmpeg
此时程序就出入运行状态了
3，打开所需要转换的视频所在文件夹
cd+空格+视频所在文件夹的地址
4，直接输入ffmpeg的地址，然后在之后添加一下命令：
-i 1.mp4 -acodec libvorbis 1.ogg
5, 回车，开始转换
时间： 2024-11-08 21:38:04