video属性及操作

video属性较多，这篇博客总结一下几个常用的，然后再写一个例子练习一下。

video api

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

加载播放路径

video.src = "./mp4/mov_bbb.mp4";

当浏览器加载媒体数据的时候执行的

video.onloadstart = function () {
        console.log("开始加载。。。");
    }
    video.onloadeddata = function () {
        console.log("开始加载视频数据。。。");
    }

视频因缓冲停止播放执行事件

video.oncanplay = function () {
        console.log("当前视频正在缓冲。。。");
    }

video　加载失败的时候执行的脚本

video.onerror = function () {
        console.log("加载失败的时候。。。");
    }

开始播放的时候执行

video.onplay = function () {
        console.log("开始播放。。。");
    }

暂停的时候执行的脚本

video.onpause = function () {
        console.log("暂停。。。");
    }

当设置为静音的时候执行

video.onvolumechange = function () {
        console.log("静音时候执行");
    }

正在播放的时候执行的事件

video.onplaying = function () {
        console.log("正在播放。。。");
    }

播放的位置发生变化的时候
只要位置发生变化就会执行

扫描二维码关注公众号，回复： 9959205 查看本文章

video.ontimeupdate = function () {
        console.log("播放位置在改变。。。");
    }

地理定位：必须要获得用户的同意

var getlocation = document.querySelector("#getlocation");
    getlocation.onclick = function () {
        //先检测浏览器是否支持定位
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getLocation, error);
        }
        else {
            alert("浏览器不支持地理定位！");
        }
    }
    function getLocation(position) {
        console.log(position);
        /*
         * accuracy：精确度
         latitude：纬度
         longitude：经度
         altitude：海拔
         altitudeAcuracy：海拔高度的精确度
         heading：朝向
         speed：速度
         * */
    }
    function error(error) {
        console.log(error);
        /*
         * 1、message：错误信息
         2、 code：错误代码。
         * */
    }

下面是一个播放器的小练习：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            width: 500px;
            height: 350px;
            background-color: #000;
        }

        #video {
            width: 500px;
            height: 300px;
        }

        .items {
            width: 500px;
            height: 50px;
            font-size: 0;
        }

        .play {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            font-size: 13px;
            outline: none;
            border-style: none;
            margin: 0 10px;
        }

        .items > span {
            font-size: 13px;
            color: #fff;
        }

        .prog {
            position: relative;
            width: 460px;
            height: 4px;
            margin: 7px auto;
            background-color: #c0c0c0;
            border-radius: 10px;
            cursor: pointer;
        }

        .btn {
            position: absolute;
            width: 10px;
            height: 10px;
            top: -3px;
            background-color: #fff;
            border-radius: 50%;
        }

        .range {
            position: relative;
            top: 5px;
            left: 10px;
        }

        #volume {
            font-size: 13px;
            margin: 0 15px;
        }

        .bigsc {
            font-size: 13px;
            margin: 0 15px;
        }
    </style>
</head>
<body>
<div class="block">
    <video id="video"></video>
    <div class="items">
        <button class="play" data-play="play">play</button>
        <span class="nowtime">0:00</span><span>/</span>
        <span class="alltime">0:00</span>
        <input class="range" type="range" value="0" max="100">
        <button id="volume" data-volume="0">静音</button>
        <button id="bigsc">全屏</button>
        <div class="prog">
            <div class="btn" style="left:-5px;"></div>
        </div>
    </div>
</div>
<script>
    var video = document.querySelector("#video");
    var play = document.querySelector(".play");
    var alltime = document.querySelector(".alltime");
    var nowtime = document.querySelector(".nowtime");
    var btn = document.querySelector(".btn");
    var prog = document.querySelector(".prog");
    var range = document.querySelector(".range");
    var volume = document.querySelector("#volume");
    var bigsc = document.querySelector("#bigsc");

    var sound = 0;
    video.src = "./mp4/mov_bbb.mp4";
    //视频开始加载数据   开始加载的时候视频的数据不存在
    video.onloadeddata = function () {
        console.log(this.duration);
        //对总时间进行换算
        alltime.innerHTML = method(this.duration);
        //设置初始化的音量
        range.value = this.volume * 100;
        sound = this.volume;
    }

    //当前播放位置发生变化的api
    video.ontimeupdate = function () {
        console.log(this.currentTime);
        nowtime.innerHTML = method(this.currentTime);
        //根据时间计算left
        btn.style.left = (this.currentTime / this.duration) * 460 + "px";
    }
    //播放完成
    video.onended = function () {
        console.log("播放完成");
        play.setAttribute("data-play", "play");
        play.innerHTML = "play";
    }

    play.onclick = function () {
        var status = this.getAttribute("data-play");
        if (status == "play") {
            status = "pause";
            video.play();
        }
        else {
            status = "play";
            video.pause();
        }
        this.setAttribute("data-play", status);
        this.innerHTML = status;

    }
    //进度条
    prog.onmousedown = function (e) {
        var x = e.layerX;
        btn.style.left = (x - 5) + "px";
        //换算事件比例
        Htime(x);
    }
    btn.onmousedown = function (e) {
        var that = this;
        var startX = e.clientX;
        var startLeft = parseInt(that.style.left);
        //给整个添加move 事件
        window.onmousemove = function (e) {
            var x = e.clientX - startX;
            var cha = startLeft + x;
            cha = cha < -5 ? -5 : cha > 455 ? 455 : cha;
            that.style.left = cha + "px";
            //换算事件比例
            Htime(cha);
        }
        //处理事件冒泡
        e.stopPropagation();
    }
    window.onmouseup = function (e) {
        window.onmousemove = null;
    }
    //条音量的
    range.onmousedown = function () {
        this.onmousemove = function () {
            video.volume = this.value / 100;
        }
        this.onmouseup = function () {
            video.volume = this.value / 100;
            sound = this.value / 100;
            this.onmousemove = null;
            this.onmouseup = null;
        }
    }
    //设置静音
    volume.onclick = function () {
        var volumeSound = parseInt(this.getAttribute("data-volume"));
        if (!volumeSound) {
            volumeSound = 1;
            video.volume = 0;
            range.value = 0;
        }
        else {
            volumeSound = 0;
            video.volume = sound;
            range.value = sound * 100;
        }
        this.setAttribute("data-volume", volumeSound);
    }

    //全屏代码
    bigsc.onclick = function () {
        //让video  全屏
        if (video.requestFullscreen) {
            video.requestFullscreen();
        }
        else if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen();
        }
        else if (video.mozRequestFullscreen) {
            video.mozRequestFullscreen();
        }
        else {
            video.msRequestFullscreen();
        }
    }


    //换算的方法
    function method(time) {
        //time  秒为单位的
        var sec = parseInt(time % 60);
        var min = parseInt((time / 60) % 60);
        var hour = parseInt((time / 3600) % 24);
        sec = sec < 10 ? "0" + sec : sec;
        min = min < 10 ? "0" + min : min;
        hour = hour < 10 ? "0" + hour : hour;
        return hour + ":" + min + ":" + sec;

    }
    function Htime(x) {
        //换算比例
        var current = x / 460 * video.duration;
        video.currentTime = current;
        nowtime.innerHTML = method(video.currentTime);
    }

</script>
</body>
</html>

效果：
在这里插入图片描述总结：video的不同属性代表不同的功能，熟练运用就可以让播放器变得更加的方便快捷。

Always_Love

发布了29 篇原创文章 · 获赞 1 · 访问量 559

私信关注

猜你喜欢