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("正在播放。。。");
    }

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

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：错误代码。
         * */
    }

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