0601视频播放器

最新推荐文章于 2021-03-29 13:07:36 发布

叫我小袁就好

最新推荐文章于 2021-03-29 13:07:36 发布

阅读量201

点赞数

本文链接：https://blog.csdn.net/qq_42788101/article/details/90478636

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频播放器</title>
    <style>
        button{
            color: #FFFFFF;
            background-color: #93baff;
            width: 103px;
            padding: 0.5em 2em 0.55em;
            cursor: pointer;/*鼠标悬停时变为“小手形状*/
            outline: none;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
            text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
            border-radius: 0.5em;/*边框圆角*/
        }
        button:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<video src="../../video/video0601/myVideo.ogg" id="video"></video><br>
<button onclick="bf()" id="b">播放</button>
<button onclick="goBack(+3)">快进3s</button>
<button onclick="goBack(-3)">后退3s</button>
<button onclick="volume(0.1)">音量+</button>
<button onclick="volume(-0.1)">音量-</button>
<button onclick="jy()" id="j">静音</button>
<script type="text/javascript">
    var video=document.getElementById('video');
    function bf(){
        var ppbutton=document.getElementById('b');
        if(video.paused){
            video.play();
            ppbutton.innerHTML="暂停";
        }
        else{
            video.pause();
            ppbutton.innerHTML="播放";
        }
    }
    function goBack(value){
        video.currentTime+=value;
    }
    function volume(value){
        video.volume+=value;
    }
    function jy(){
        var pbutton=document.getElementById('j');
        if(video.muted){
            video.muted=false;
            pbutton.innerHTML="静音";
        }
        else{
            video.muted=true;
            pbutton.innerHTML="声音"
        }
    }
</script>
</body>
</html>

袁同学——2019年5月23日