html5-video视频播放 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<video id="video" width="500" height="500" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。

</video>
</br></br>
<button onclick="playPause(this)">播放</button>
<button onclick="forward()">快进5秒</button>
<button onclick="rewind()">快退5秒</button>
<button onclick="mute(this)">静音</button>
<button onclick="accelerate()">加速3倍播放</button>
<button onclick="decelerate()">减速3倍播放</button>
<button onclick="normal()">正常播放</button>
<button onclick="upperVolume()">提高声音</button>
<button onclick="lowerVolume()">减少声音</button>

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

    function playPause(obj) {
        if (video.paused) {
            video.play();
            obj.innerHTML = "暂停";
        } else {
            video.pause();
            obj.innerHTML = "播放";
        }

    }

    function forward() {
        video.currentTime += 5;
    }

    function rewind() {
        video.currentTime -= 5;
    }

    function mute(obj) {
        if (video.muted) {
            video.muted = false;
            obj.innerHTML = "静音";
        } else {
            video.muted = true;
            obj.innerHTML = "开声";
        }

    }

    function accelerate() {
        video.playbackRate = 3;
    }

    function decelerate() {
        video.playbackRate = 1 / 3;
    }

    function normal() {
        video.playbackRate = 1;
    }

    function upperVolume() {
        video.volume += 0.2;
    }

    function lowerVolume() {
        video.volume -= 0.2;
    }
</script>
</body>
</html>

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

注意: Internet Explorer 8 或者更早的IE版本号不支持 <video> 元素。


posted @ 2017-04-16 12:01  mfmdaoyou  阅读(491)  评论(0)    收藏  举报