html5 视频播放

html5 视频播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            $("#play").bind('click',function(){
               $("#video")[0].play();
            });
            $("#pause").bind('click', function () {
                $("#video")[0].pause();
//                $("#video")[0].currentTime+=10;   //快进10秒
//                $("#video")[0].currentTime-=10;    //快退10秒
//                $("#video")[0].playbackRate+=2;   // 播放速度+
//                $("#video")[0].playbackRate=1;      //正常播放
//                $("#video")[0].volume+=0.1; // 加音量
//                $("#video")[0].muted=true; // 静音
//                $("#video")[0].muted=false;// 取消静音
//                $("#video")[0].webkitEnterFullscreen();  //webkit 全屏
//                $("#video")[0].mozRequestFullScreen();   // firefox 全屏
            });
            $("#play2").bind('click',function(){
                $("#video")[0].playbackRate=3;
            });
        });
    </script>
</head>
<body>
<video id="video" width="400"  poster="../img/logo.png">
    <source src="../video/piano.mp4" type="video/mp4"/>
你的浏览器不支持html5
</video>
<hr>
<button id="play">播放</button><button id="pause">暂停</button>
<button id="play2">快播</button>
<hr/>
autoplay 自动播放 （不推荐）
loop 循环播放
preload 是否等加载完再播放（不推荐）
poster="../logo.png" 视频封面

<!--简单版-->
<!--<video src="../vide/piano.mp4" controls="controls">
    你的浏览器不支持html5
</video>-->
<hr/>
听歌：
<audio src="../video/酸甜.mp3" controls="controls"></audio>

</body>
</html>