H5

H5 Video&Audio

2018-03-27  本文已影响9人  Fisher123
<!-- HTML5(视频) <video> 元素支持三种视频格式: MP4, WebM, 和Ogg -->
<video width="640" height="480" controls>
    <source src="iphone-x.mp4" type="video/mp4">
       您的浏览器不支持Video标签
</video>

<!-- HTML5视频demo -->
<div style="text-align:center">
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">放大</button>
    <button onclick="makeSmall()">缩小</button>
    <button onclick="makeNormal()">普通</button>
   <br>
   <video id="video1" width="420">
           <source src="mov_bbb.mp4" type="video/mp4">
               您的浏览器不支持HTML5 video标签。
   </video>       
</div>

<script>
    var myVideo = document.getElementById("video1");
    //  播放/暂停
    function playPause() {
        if (myVideo.paused) {
            myVideo.play();
        } else {
            myVideo.pause();
        }   
    }
    // 放大
    function makeBig() {
        myVideo.width = 560;     
    }
    // 缩小
    function makeSmall() {
        myVideo.width = 320;     
    }
    // 普通
    function makeNormal() {
        myVideo.width = 420;     
    }
</script>

 <!-- HTML5音频Audio <audio>元素支持三种音频格式文件: MP3, Wav, 和Ogg -->
<audio controls>
   <source src="说散就散.mp3" type="audio/mp3">
       您的浏览器不支持HTML5 audio标签。
</audio>

// 音频和视频文件放在html文件同一级目录下。

上一篇 下一篇

猜你喜欢

热点阅读