美文网首页
## HTML5 多媒体API

## HTML5 多媒体API

作者: 飞鱼_JS | 来源:发表于2017-06-08 19:08 被阅读0次

    多媒体

    相关标签

    • <video> 视频
    • <audio> 音频
    • <source>
    • <track>

    DOM(video/audio)

    • 属性
      • volume 音量
      • muted 是否静音
      • ....
    • 方法
      • play()
      • pause()
      • .....
    • 事件
      • onplay
      • ....

    示例

    <body>
        <h1>多媒体 视频/视频</h1>
        <video src="http://movie.ks.js.cn/flv/other/1_0.mp4" id="myvideo"></video>
        <br>
        <button onclick="play(this)">开始</button>
        <button onclick="jianSound()">-</button>
        <button onclick="jiaSound()">+</button>
        <script>
            var myvideo = document.getElementById("myvideo");
            function play(btn){
                if (btn.innerHTML === "开始") {
                    myvideo.play();
                    btn.innerHTML = "暂停";
                } else {
                    myvideo.pause();
                    btn.innerHTML = "开始";
                }
            }
            function jiaSound(){
                myvideo.volume += 0.1;
            }
            function jianSound(){
                myvideo.volume -= 0.1;
            }
            myvideo.addEventListener("play", function(){
                alert("啊,开始播放了");
            })
        </script>
    </body>
    

    视频插件

    • ckplayer
    • jplayer
    • flowplayer
    • video.js
    • flv.js

    相关文章

      网友评论

          本文标题:## HTML5 多媒体API

          本文链接:https://www.haomeiwen.com/subject/zfptqxtx.html