video相关简单的api

video

关键api

1.  video.pause()  
2.  video.play()
3.  video.webkitRequestFullScreen()  //全屏
4.  video.currentTime //当前进度   
5.  video.duration  //总进度

监听方法：

video.ontimeupdate = function(){  }

    <video src="./movie/bglb.mp4"></video>

    var video = document.querySelector("video");

    //1. 判断是否是暂停状态
        if (video.paused == true) {
            //更换按钮
            this.classList.remove("icon-play");
            this.classList.add("icon-pause");

            //播放
            video.play();
        } else {

        }

    //2. 全屏
    video.webkitRequestFullScreen();

    //3. 监听视频进度更新的事件
    //视频的当前时间
    ("当前时间" video.currentTime);
    // 视频的总时间
    //("总时间" video.duration);

    video.ontimeupdate = function() {
        var percent = video.currentTime/video.duration * 100  "%";
        console.log(percent);

        //给进度条添加样式
        document.querySelector(".move").style.width = percent;
    }

    //4. 点击进度条， 更改播放的位置
    document.querySelector(".progress").onclick = function (event) {
        //点击的x坐
        var clickx = event.offsetX;
        console.log(clickx);
        //获取到progress的宽度
        var pw = this.offsetWidth;
        console.log(pw);

        var percent = clickx / pw;
        // 当前的视频的时间点
        var currentTime = percent * video.duration;
        //设给video
        video.currentTime = currentTime;
    }

更多专业前端知识，请上 【猿2048】www.mk2048.com