H5多媒体

Video

<video width="500px" controls="controls">
    <source src="test.ogg" type="video/ogg" />
    你的浏览器不支持video
</video>

控件是可以隐藏的,可以自定义控件

<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()"></button>
<button onclick="makeNormal()"></button>
<button onclick="makeSmall()"></button>
<br />
<video id="video1" width="500px">
    <source src="test.ogg" type="video/ogg" />
</video>

<script type="text/javascript">
var myVideo = document.getElementById("video1");

function playPause(){
    if (myVideo.paused){
        myVideo.play();
    }
    else{
        myVideo.pause();
    }
}

function makeBig(){
    myVideo.width = 600;
}
function makeNormal(){
    myVideo.width = 500;
}
function makeSmall(){
    myVideo.width = 400;
}
</script>

Audio

<audio controls="controls">
    <source src="song.mp3" type="audio/mepg" />
    <source src="song.ogg" type="audio/ogg" />
    Your browser does not support the audio tag.
</audio>

H5还提供了很多多媒体的API,运用这些API可以做出精美的视频播放器和音乐播放器,时间有限,等我以后再来更新。

原文地址:https://www.cnblogs.com/zcynine/p/4987433.html