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>