项目 - 音视频播放

项目中获取视频的时长以及显示实时的播放时长

视频标签相关的API

知识点：
① oncanplay：当浏览器可以开始播放视频或者音频的时候所触发的事件。
语法结构：
视频.oncanplay = function(){
	
}
② 视频的播放以及暂停功能
播放：视频.play()
暂停：视频.pause()
③ ontimeupdate：在视频播放时间改变的时候触发的事件
语法结构：
视频.ontimeupdate = function(){
    
}
④ currentTime：设置或返回音频 / 视频中的当前播放位置（以秒计）。
⑤ duration:返回当前音频 / 视频的长度（以秒计）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 播放视频 */
.play_left{
    width: 850px;
    height: 485px;
    position: relative;
}

/* 右边 */
.play_right{
    width: 340px;
    height: 485px;
}
.play_item{
    width: 100%;
    height: 47px;
    background: #3f3f3f;
}
.play_item li{
    width: 113px;
    height: 45px;
    background: #323232;
    color: #ccc;
    text-align: center;
    font:14px/45px "宋体";
    cursor: pointer;
}
.play_list li{
    height: 24px;
    line-height: 24px;
    color: #999;
    padding: 17px 15px 10px 20px;
    border-bottom: 1px solid #373737;
}
.play_list li:hover{
    background: #000;
}
.play_list .active{
    background: #000;
    color: #ff740f;
}

/* 视频的控制选项 */
.play_contorls{
    width: 100%;
    height: 74px;
    background: url(img/offcn_icnp07.png) no-repeat center;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.play_btn{
    width: 143px;
    height: 74px;
}
.play_btn a{
    display: block;
    width: 21px;
    height: 26px;
    background: url(img/offcn_icnolh04.png) no-repeat center;
    position: absolute;
    left:30px;
    top:25px
}
.play_btn .play_b{
    background: url(img/offcn_icnolh03.png) no-repeat center;

}
.play_cur{
    width: 64px;
    font: 16px/18px "微软雅黑";
    color: #fff;
    position: absolute;
    left: 64px;
    top:30px;
}
.slide{
    width: 550px;
    height: 74px;
    position: absolute;
}
.slide_bg{
    position: absolute;
    width: 100%;
    height: 4px;
    background: #be998f;
    top:35px;
}
.slide_l{
    width: 0px;
    height: 4px;
    background: blue;
    position: absolute;
    top:35px;
}
.slide_btn{
    position: absolute;
    width: 22px;
    height: 22px;
    background: url(img/offcn_icnolh05.png) no-repeat center;
    top: 26px;
}
.play_time{
    width: 64px;
    font: 16px/18px "微软雅黑";
    color: #fff;
    position: absolute;
    left: 720px;
    top:30px;
}
    </style>
</head>
<body>
    <div class="play_left fl">
        <video id='video' width="100%" height="100%" src="./media/1、动画.50.mp4"></video>
        <div class="play_contorls">
            <p class="fl play_btn">
                <a href="javascript:;" id="play_btns" class=""></a>
            </p>
            <p class="fl play_cur" id="playCur">00:00:00</p>
            <div class="fl slide">
                <p class="slide_bg"></p>
                <p class="slide_l" id="slide"></p>
                <a href="javascript:;" class="slide_btn" id="slideBtn"></a>
            </div>
            <div class="fl play_time" id="playTime">00:00:00</div>
        </div>
    </div>
</div>

    <script>
        var play_btns = document.getElementById("play_btns");
        var video = document.getElementById("video");
        var playTime = document.getElementById("playTime");
        var playCur = document.getElementById("playCur");
        var slide = document.getElementById("slide");
        var slideBtn = document.getElementById("slideBtn");
        //显示视频的总时长
        //oncanplay：当浏览器可以开始播放视频或者音频的时候所触发的事件
        video.oncanplay = function(){
            //duration:返回当前音频 / 视频的长度（以秒计）
            playTime.innerHTML = Time(this.duration); //单位为毫秒
        }
        function Time(date){
            //调用PadTime函数添加一个添加前导0的函数
            var hours = PadTime(parseInt(date/3600));
            var mis = PadTime(parseInt(date%3600/60));
            var sec = PadTime(parseInt(date%60));
            var str = hours+':'+mis+':'+sec;
            return str;
        }

        function PadTime(value){
            //value是形式参数
            //value参数对应的就是parseInt(date/3600)|parseInt(date%3600/60) | parseInt(date%60)
            return value<10?'0'+value:value;
        }
        //切换视频的播放以及暂停的状态
        var tag = true;
        play_btns.onclick = function(){
            if(tag){
                //如果tag状态为true，则播放视频
                //video.play()  播放视频
                video.play();
                //切换图片的样式为暂停的图片
                play_btns.className = "play_b";
                //修改tag的状态激发else中的内容
                tag = false;
            }
            else{
                //如果tag状态为false，则暂停视频
                //video.pause() 暂停视频
                video.pause();
                //清除样式
                play_btns.className = "";
                //修改样式true，激发为播放时候的状态
                tag =true;
            }
        }
        //在视频播放的时候触发的事件
        video.ontimeupdate = function(){
            //视频在实时播放的时候需要获取当前的时间
            //currentTime：设置或返回音频 / 视频中的当前播放位置（以秒计）。
            playCur.innerText = Time(video.currentTime);
            //播放进度条以及进度宽度 = 当前播放位置*播放条的总宽度  / 视频的总长度
            slide.style.width = video.currentTime*550 / video.duration + "px";
            slideBtn.style.left = video.currentTime*550 / video.duration + "px";
        }
    </script>
</body>
</html>
# html
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区