JavaScript -- 音频视频的播放

首先是音频：

<!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"> -->
        <!--&lt;!&ndash;由于有的浏览器不支持.mp4格式的视频,因此需要添加资源库&ndash;&gt;-->
        <!--<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, 回车，开始转换

JavaScript -- 音频视频的播放

猜你喜欢