WKWebview中video标签，js自动获取视频url封面问

问题：后台从各个平台（微信、微博、某音）等爬取的视频url，要放在webview中video标签播放。没有封面，所以从视频url中截取。最正常的方法，肯定是通过js在html中直接截取了。但有些视频的url会206一下或转发一次，存在跨域问题。就是各种跨域问题。

下面介绍两种方式：

js截取代码（一般直连的视频url是没有问题的）

在html加载完后，调用该js函数，可获取视频封面。（但个别视频存在跨域问题）

function getVideoCover() {
        let oriVideo = document.getElementById('video')


        let video = document.createElement("video");
        var src = oriVideo.src;//"./1.mp4"

        video.setAttribute("src", src);
        video.setAttribute("autoplay", "autoplay");
        video.setAttribute("crossOrigin", "anonymous"); //设置跨域 否则toDataURL导出图片失败
        video.currentTime = 1; //视频时长，一定要设置，不然大概率白屏

        video.setAttribute("webkit-playsinline",true);
        video.setAttribute("playsinline",true);
        video.setAttribute("muted",true); //静音

        video.addEventListener('canplay', function() {
            this.width = this.videoWidth;
            this.height = this.videoHeight;

            let canvas = document.createElement("canvas");
            canvas.width = this.width; //画布大小，默认为视频宽高
            canvas.height = this.height;
            canvas.getContext("2d").drawImage(video, 0, 0, this.width, this.height); //绘制canvas
            let dataURL = canvas.toDataURL("image/png"); //转换为base64

            oriVideo.setAttribute('poster', dataURL);

            video.pause();  //获取到封面 停止播放
        });
    }

原生截取url视频封面，设置到video标签中（忍无可忍的方案，解决了问题）

1、首先原生截取视频封面(swift代码)

/// 获取本地video的封面截图
    ///
    /// - Parameter url: 视频url
    /// - Returns: 图片
    func getVideoCover(url:String) -> UIImage? {
        let ul = URL.init(string: url)
        if ul == nil {
            return nil;
        }
        let aset = AVURLAsset(url: ul!, options: nil)
        let assetImg = AVAssetImageGenerator(asset: aset)
        assetImg.appliesPreferredTrackTransform = true
        assetImg.apertureMode = AVAssetImageGenerator.ApertureMode.encodedPixels
        do{
            let cgimgref = try assetImg.copyCGImage(at: CMTime.init(seconds: 1, preferredTimescale: 60), actualTime: nil)
            return UIImage(cgImage: cgimgref)
        }catch{
            return nil;
        }
    }

2、js设置video标签的poster封面（js代码）

function setVideoCover(imgPath) {
       let video = document.getElementById('video');
       video.setAttribute("poster", imgPath);
 }

function getVideoUrl() {
       let oriVideo = document.getElementById('video')
       var src = oriVideo.src;
       return src;
}

3、将获取到的封面，设置给video标签

通过js得到视频的url，通过swift函数根据url得到封面，将封面设置给video标签，如下图

总结，webview中，js获取视频封面，安卓就没有任何问题，iOS就各种跨域，也是很无奈。最后不得不曲线解决。