web前端学习（二）html学习笔记部分（4）--audio和video文件播放

1.2.10 html5音频

1.2.10.1 HTML5音频播放

　　本课主要讲解HTML5播放音频

<!--<button onclick="clickA">播放/暂停</button>-->

<!--系统默认控制器-->
<audio controls="controls">
    <source src="file://D:/webProjects/music.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>
<!--谷歌浏览器的音乐播放器不能拖进度条，很奇怪。
网上有回答是只有本地视频才会出现这种情况。。。很烦。
火狐浏览器的audio元素可以正常使用。-->
<br/>
<audio src="music/music.mp3" controls="controls"></audio>

参考资料：https://segmentfault.com/q/1010000011597379

自定义播放器控制器件

<body>
    <button onclick="clickA()">播放/暂停</button>
    <audio id="audio" src="music/test.mp3">您的浏览器不支持</audio>
    <script>
        var a = document.getElementById("audio");
        function clickA(){
            if(a.paused){
                a.play();
            }else{
                a.pause();
            }
        }
    </script>

1.2.10.2 HTML5音频视频-编解码工具

　　本课主要讲解编解码工具的使用

ffmpeg转码工具，命令等在此不做记录了。可以再看一遍视频或者自己搜索ffmpeg的使用教程

1.2.10.3 HTML5音频视频-视频播放

　　本课主要讲解HTML5的视频播放

<!--<video src="video/video.mp4" controls="controls"></video>-->
<!--<video id="video" controls>-->
<!--使用controls是使用浏览器默认的控制器件-->
<button onclick="clickV()">播放/暂停</button><br/>
<button onclick="clickBig()">放大</button><br/>
<button onclick="clickSmall()">缩小</button><br/>
<video id="video" height="200px" height="200px" >
    <source src="video/video.mp4">
    <source src="video/video.ogg">
    <!--准备两种类型的视频，就会播放只有一个的视频，
    有一个播放就可以了-->
    您的浏览器不支持！
</video>
<script>
    var v = document.getElementById("video");
    function clickV(){
        if(v.paused){
            v.play();
        }else{
            v.pause();
        //    paused是个状态，pause()是个函数暂停；
        }
    }
    function clickBig() {
        v.width = "400";
        // v.width = 400;
        //在js中400和"400px"="400"是不同的，后两种才是px单位的，
        // 前一种我目前不知道是什么单位
        v.height = "400";
    }
    function clickSmall(){
        v.width = "200";
        v.height = "200";
    }
</script>