原生JS操作视频

最新推荐文章于 2023-08-02 17:44:21 发布

是欢欢啊

最新推荐文章于 2023-08-02 17:44:21 发布

阅读量294

点赞数

分类专栏： JS demo JS相关

本文链接：https://blog.csdn.net/bznhlhh/article/details/114873663

版权

JS相关同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

JS demo

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .ddd {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 960px;
        margin: 0 auto;
    }
    
    video {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 200px auto 0;
    }
    
    .controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .progressTime {
	    position: absolute;
	    bottom: 3%;
	    left: 2%;
	    width: 2.3rem;
	    height: .01rem;
	    background-color: #eeeeee;
	}
	.progress {
	    height: .01rem;
	    position: absolute;
	    bottom: 3%;
	    left: 0;
	    background-color: red;
	    border-radius: .04rem;
	    overflow: hidden;
	}
    
    .showTime {
        display: flex;
        color: white;
    }
    
    .exted,
    button,
    video {
        cursor: pointer;
    }
</style>

<body>
    <div class="container">
        <div class="ddd">
            <video src="http://other.web.re03.sycdn.kuwo.cn/3eaf0fe12c54b2cdce8772cfb3b8ff5f/6051a036/resource/m2/49/4/2568669376.mp4"></video>
            <div class="controls">
                <div class="left">
                    <button>播放</button>
                </div>
                <div class="progressTime">
	                <div class="progress"></div>
	            </div>
                <div class="showTime">
                    <div class="currentTime">00:00:00</div>/
                    <div class="totalTime">00:00:00</div>
                    <div class="exted">全屏</div>
                </div>
            </div>
        </div>
    </div>



</body>

</html>
<script>
    songs = [
        "http://win.web.nf03.sycdn.kuwo.cn/cc0a04cb481d805109932515db0a4051/6051a3ac/resource/m2/21/65/3529384992.mp4",
        "http://win.web.nf03.sycdn.kuwo.cn/8609feb7eb592beee3ab55e5edc60eae/6051a3f1/resource/m2/30/3/2582583268.mp4",
        "http://win.web.nf03.sycdn.kuwo.cn/d015fb61bbcb6122a2066b9c042b39e0/6051a41d/resource/m2/29/73/2363786585.mp4",
        "http://win.web.rh03.sycdn.kuwo.cn/4f5240e1495ed4d2614d59fb87c9b856/6051a7b3/resource/m3/13/3/1924293162.mp4",
        "http://win.web.nf03.sycdn.kuwo.cn/4aa8cb6677602d30433fd044da6fb192/6051a7c5/resource/m3/87/71/3002992249.mp4",
        "http://win.web.nf03.sycdn.kuwo.cn/0668d6b5f3ec1a8e5b1e89e2ea939b9b/6051a7f4/resource/m2/43/41/3342207081.mp4",
        "http://win.web.nf03.sycdn.kuwo.cn/55b8f10246457151a3349be47c53f875/6051a80b/resource/m3/30/24/2449983276.mp4",
        "http://ex.sycdn.kuwo.cn/a6600267aa9f7f4050164fb3c3c3ed59/6051a848/resource/m3/43/69/242077528.mp4",
    ]

    //抓取视频标签节点
    var video = document.querySelector("video");
    console.log(video.src);
    //随机获取视频的src;
    var sour = Math.floor(Math.random() * 7);
    video.src = songs[sour]
    console.log(sour);
    //抓取播放按钮节点
    var btn = document.querySelector("button");
    //获取视频当前播放时长节点
    var currentTime = document.querySelector(".currentTime");
    //获取视频播放时长进度条
    var progress = document.querySelector(".progress");
    //获取视频总时长
    var totalTime = document.querySelector(".totalTime");
    //获取全屏按钮节点
    var exted = document.querySelector(".exted");
    //视频加载完成所需要的时间
    video.oncanplay = function() {
        //duration总时间
        var Time = video.duration;
        console.log(Time);
        //对获取到的时间做处理,显示总时间
        var h = Math.floor(Time / 3600);
        var m = Math.floor(Time % 3600 / 60);
        var s = Math.floor(Time % 60);
        //三目运算符对时间进行判断
        h = h >= 10 ? h : "0" + h;
        m = m >= 10 ? m : "0" + m;
        s = s >= 10 ? s : "0" + s;
        //显示总时长
        totalTime.innerHTML = h + ":" + m + ":" + s;
    }

    //当视频播放的时候,进度条同步,当前时间同步,
    // ontimeupdate : 当时间当前时间更新的时候触发
    video.ontimeupdate = function() {
        //获取视频当前播放时间
        cTime = video.currentTime;
        var h = Math.floor(cTime / 3600);
        var m = Math.floor(cTime % 3600 / 60);
        var s = Math.floor(cTime % 60);
        h = h >= 10 ? h : "0" + h;
        m = m >= 10 ? m : "0" + m;
        s = s >= 10 ? s : "0" + s;
        currentTime.innerHTML = h + ":" + m + ":" + s;

        //duration总时间
        var Time = video.duration;
        //改变进度条的宽度  :当前时间/总时间
        var value = cTime / Time;
        progress.style.width = value * 100 + "%";
        console.log(cTime, Time);
    }

    //按钮控制视频播放暂停功能
    btn.onclick = function() {
            console.log(video)
            if (video.paused) {
                video.play();
                btn.innerText = "暂停";
            } else {
                video.pause();
                btn.innerText = "播放";
            }
        }
        //点击视频区域控制视频播放暂停功能
    video.onclick = function() {
            document.querySelector("button").click();
        }
        //点击使用全屏播放
    exted.onclick = function() {
            video.requestFullscreen();
        }
        //使用空格键控制播放
    document.onkeyup = function(event) { //键盘事件
        if (event.keyCode == 32) {
            document.querySelector("video").click();
        }

    }
</script>

是欢欢啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS操作视频

<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>&
复制链接

扫一扫

专栏目录