js video不能自动播放，获取video宽高，跨域video截图，监听video.currentTime

1.video 不能 自动播放

据新政策，媒体内容将在满足以下至少一个的条件下自动播放：

a.音频被静音声音设置为0 , 即video新增

muted

b.用户和网页上的交互行为（包括点击、触摸、按下某个键等）

c.网站已被触发这白名单；如果浏览器确定用户经常与媒体互动，可能会自动通过首选项或其他用户界面功能手动操作

d.自动播放策略应用到或者其文档上

否则，会被阻止。导致事件被其他人的具体情况以及可能会因为浏览而异，但最好是遵循以上的原则。

2.获取video视频的宽高

通过canplay 事件，其他事件loadedmetadata，loadeddata也可以

this.currentVideo.addEventListener('canplay', function() {
	conosle.log(this.videoWidth,this.videoHeight)
})
           

3.跨域video 截图 报错

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

通过办法，给video新增

crossOrigin

属性

4.如何监听video.currentTime?

通过 timeupdate 事件

== demo ==

<!-- video.vue -->
<template>
    <div class="trailer_video_box">
        <video
            ref="trailer"
            class="trailer_box"
            preload
            :src="videoUrl"
            muted
            controls="controls"
        />
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentVideo: null, //视频容器
            videoUrl: 'https://qnyb00.cdn.ipalfish.com/0/aud/c5/19/0f9f74383f57c0cea9612b28729f',
        };
    },
    mounted() {
        this.init();
    },
    methods: {
    //初始化事件
        init() {
            let timer;
            this.currentVideo = this.$refs.trailer;
            // this.currentVideo.useCORS=true;//解决跨域
            this.currentVideo.crossOrigin='Anonymous';// 这两个参数必填 解决跨域
            this.currentVideo.play();
            this.currentVideo.addEventListener('loadeddata', (e) => {
                this.currentVideo.addEventListener('timeupdate', ()=> {
                    if (this.currentVideo.currentTime>1) {
                        this.currentVideo.pause();
                        timer &&clearTimeout(timer) // 此处避免重复执行2次
                        timer = setTimeout(()=>{
                            let canvas = document.createElement('canvas');
                            canvas.width = this.currentVideo.videoWidth;
                            canvas.height = this.currentVideo.videoHeight;
                            canvas.getContext('2d').drawImage(this.currentVideo, 0, 0, canvas.width, canvas.height);
                            let img = new Image();
                            img.src = canvas.toDataURL('image/png');
                            img.style.width = "100%"
                            img.onload = function () {
                                document.body.appendChild(img);
                            };
                        })
                    }
                });
            });
        }
    },
};
</script>
<style lang='less' scoped>
.trailer_video_box {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #292c32;
  .trailer_box {
    width: 100%;
    height: 100%;
  }
}
</style>