• 4.1 HTML5 音频


    1. controls自带效果

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <audio src="raw/1.mp3" controls="controls"></audio>
    </body>
    </html>

      

    2. 自定义 

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="button" onclick="p()">播放</button>
        <audio id="music" src="raw/1.mp3">浏览器不支持此音频</audio>
        <script>
            var music = document.getElementById("music");
            var button = document.getElementById("button");
            function p(){
                if(music.paused){
                    music.play();
                    button.innerHTML = "暂停";
                }
                else{
                    music.pause();
                    button.innerHTML = "播放";
                }
            }
        </script>
    </body>
    </html>

    3. 编解码工具

      FFmpeg.org

      <1>进去需要转码文件的文件夹

      <2>ffmpeg路径 -i 需要转码文件名及后缀 -acodec libvorbis 想转成的文件及后缀

    4. 视频

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <video controls="controls">
            //引入两个视频格式是以防浏览器不支持
            <source src="raw/3.mp4">
            <source src="raw/3.ogg">
            您的浏览器不支持
        </video>
    </body>
    </html>
  • 相关阅读:
    Object类学习
    Thread.State 线程状态
    Thread.UncaughtExceptionHandler
    apply和call的区别
    如何实现border-width:0.5px;
    table固定头部,表格tbody可上下左右滑动
    canvas画布实现手写签名效果
    ES6学习笔记
    for循环中执行setTimeout问题
    javaScript函数提升及作用域
  • 原文地址:https://www.cnblogs.com/iMirror/p/4290066.html
Copyright © 2020-2023  润新知