JS实现视频播放功能

破裤兜

已于 2023-08-03 10:56:06 修改

阅读量4.1k

点赞数 8

分类专栏： Javascript 文章标签： javascript 前端开发语言

于 2023-08-01 12:04:35 首次发布

本文链接：https://blog.csdn.net/weixin_74535649/article/details/132034976

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

视频播放功能:

最终效果如下:

主要功能总共有这些:

文件目录结构如图所示:

chapter1.html:

<!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>
    <script type="text/javascript" src="js/chapter1.js"></script>
</head>
<body>
    <video id="myVideo" controls>
        <source src="video/video.webm" />
    </video>
    <br/>
    <input type="button" value="播放" onclick="myPlay()"/>
    <input type="button" value="暂停" onclick="myPause()"/>
    <input type="button" value="从指定位置播放" onclick="myCurrentTime()"/>
    <input type="button" value="静音" onclick="myMuted()"/>
    <input type="button" value="取消静音" onclick="myMuted2()"/>
    <input type="button" value="总时长" onclick="myDuration()"/>
    <span id="sc"></span>
    <input type="button" value="判断播放完毕" onclick="myEnded()"/>
    <input type="button" value="循环播放" onclick="myLoop()"/>
    <input type="button" value="2倍快进" onclick="myPlaybackRate()"/>
    <input type="button" value="获取播放过的信息" onclick="myTimeRanges()"/>
    <input type="button" value="获取移动播放位置信息" onclick="mySeekable()"/>
</body>
</html>

chapter1.js:


function myPlay(){
    var myVideo = document.getElementById("myVideo");
    myVideo.play();
}

function myPause(){
    var myVideo = document.getElementById("myVideo");
    myVideo.pause();
}

function myCurrentTime(){
    var myVideo = document.getElementById("myVideo");
    myVideo.currentTime=46;
}

function myMuted(){
    var myVideo = document.getElementById("myVideo");
    myVideo.muted=true;
}

function myMuted2(){
    var myVideo = document.getElementById("myVideo");
    myVideo.muted=false;
}

function myDuration(){
    var myVideo = document.getElementById("myVideo");
    document.getElementById("sc").innerText = myVideo.duration;
}

function myEnded(){
    var myVideo = document.getElementById("myVideo");
    alert(myVideo.ended);
}

function myLoop(){
    var myVideo = document.getElementById("myVideo");
    myVideo.loop = true;
    //myVideo.load();
}

function myPlaybackRate(){
    var myVideo = document.getElementById("myVideo");
    myVideo.playbackRate = 2;
}

function myTimeRanges(){
    //演示played已播放过的
    var myVideo = document.getElementById("myVideo");
    alert(myVideo.played.start(0) + "   " + myVideo.played.end(0));
}

function mySeekable(){
    var myVideo = document.getElementById("myVideo");
    alert(myVideo.seekable.start(0) + "   " + myVideo.seekable.end(0));
}