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;
    }