video.js 添加截图功能

  // 截图功能
  scrollLock() {
    const fileName  = `${new Date().getTime()}.png`;
    let fileType = "png";  // 如果文件名中没有带后缀，默认使用png
	  switch (fileName) {  // 判断保存的图片格式
      case fileName.indexOf("png") > -1:
        fileType = "png";
        break;
      case fileName.indexOf("jpg") > -1:
        fileType = "jpg";
        break;
    
      case fileName.indexOf("jpeg") > -1:
        fileType = "jpeg";
        break;
      case fileName.indexOf("bmp") > -1:
        fileType = "bmp";
        break;
      case fileName.indexOf("gif") > -1:
        fileType = "gif";
        break;
      default:
        fileType = "png";
        break;
		}
		const video = this.player.el().querySelector('video');  // 找到需要截图的video标签
		const canvas = window.canvas = document.createElement("canvas");
		canvas.width = video.offsetWidth;
		canvas.height = video.offsetHeight; 
		canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);  // 图片大小和视频分辨率一致
		const strDataURL = canvas.toDataURL("image/" + fileType);   // canvas中video中取一帧图片并转成dataURL
		const arr = strDataURL.split(',');
		const	mime = arr[0].match(/:(.*?);/)[1];
		const	bstr = window.atob(arr[1]);
		let	n = bstr.length;
		let	u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		const blob = new Blob([u8arr], {
			type: mime
		});
		const url = window.URL.createObjectURL(blob);
		const a = document.createElement('a');  
		a.style.display = 'none';
		a.href = url;
		a.download = fileName;
		document.body.appendChild(a);
		a.click();
		setTimeout(function () {
			document.body.removeChild(a);
			window.URL.revokeObjectURL(url);
		}, 1000);
  }
// 初始化时添加img标签
  initPlayer() {
    videojs.addLanguage('zh-CN',
      {
        "Play": "播放",
        "Pause": "暂停",
        "Current Time": "当前时间",
        "Duration": "时长",
        "Remaining Time": "剩余时间",
        "Stream Type": "媒体流类型",
        "LIVE": "直播",
        "Loaded": "加载完成",
        "Progress": "进度",
        "Fullscreen": "全屏",
        "Non-Fullscreen": "退出全屏",
        "Picture-in-Picture": "画中画",
        "Exit Picture-in-Picture": "退出画中画",
        "Mute": "静音",
        "Unmute": "取消静音",
        "Playback Rate": "播放速度",
        "Subtitles": "字幕",
        "subtitles off": "关闭字幕",
        "Captions": "内嵌字幕",
        "captions off": "关闭内嵌字幕",
        "Chapters": "节目段落",
        "Close Modal Dialog": "关闭弹窗",
        "Descriptions": "描述",
        "descriptions off": "关闭描述",
        "Audio Track": "音轨",
        "You aborted the media playback": "视频播放被终止",
        "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
        "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
        "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
        "No compatible source was found for this media.": "无法找到此视频兼容的源。",
        "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
        "Play Video": "播放视频",
        "Close": "关闭",
        "Modal Window": "弹窗",
        "This is a modal window": "这是一个弹窗",
        "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
        ", opens captions settings dialog": ", 开启标题设置弹窗",
        ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
        ", opens descriptions settings dialog": ", 开启描述设置弹窗",
        ", selected": ", 选择",
        "captions settings": "字幕设定",
        "Audio Player": "音频播放器",
        "Video Player": "视频播放器",
        "Replay": "重新播放",
        "Progress Bar": "进度条",
        "Volume Level": "音量",
        "subtitles settings": "字幕设定",
        "descriptions settings": "描述设定",
        "Text": "文字",
        "White": "白",
        "Black": "黑",
        "Red": "红",
        "Green": "绿",
        "Blue": "蓝",
        "Yellow": "黄",
        "Magenta": "紫红",
        "Cyan": "青",
        "Background": "背景",
        "Window": "窗口",
        "Transparent": "透明",
        "Semi-Transparent": "半透明",
        "Opaque": "不透明",
        "Font Size": "字体尺寸",
        "Text Edge Style": "字体边缘样式",
        "None": "无",
        "Raised": "浮雕",
        "Depressed": "压低",
        "Uniform": "均匀",
        "Dropshadow": "下阴影",
        "Font Family": "字体库",
        "Proportional Sans-Serif": "比例无细体",
        "Monospace Sans-Serif": "单间隔无细体",
        "Proportional Serif": "比例细体",
        "Monospace Serif": "单间隔细体",
        "Casual": "舒适",
        "Script": "手写体",
        "Small Caps": "小型大写字体",
        "Reset": "重置",
        "restore all settings to the default values": "恢复全部设定至预设值",
        "Done": "完成",
        "Caption Settings Dialog": "字幕设定窗口",
        "Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口",
        "End of dialog window.": "结束对话窗口",
        "Seek to live, currently behind live": "尝试直播，当前为延时播放",
        "Seek to live, currently playing live": "尝试直播，当前为实时播放",
        "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
        "{1} is loading.": "正在加载 {1}。"
      });
      const _this = this;
      this.$nextTick(() => {
        const parentVideo = document.getElementById(_this.setId);
        const imgEle = document.createElement('img');
        imgEle.src = require('@/assets/zixing/scrollL.png');
        imgEle.style.width = '20px';
        imgEle.style.position = 'absolute';
        imgEle.style.top = '50%';
        imgEle.style.transform = 'translate(0, -50%)';
        imgEle.style.right = '0%';
        imgEle.style.cursor = 'pointer';
        imgEle.style.zIndex = '1';
        imgEle.style.opacity = '0.5';
        imgEle.addEventListener('click', function() {
          _this.scrollLock();
        });
        imgEle.addEventListener('mouseenter', function(e) {
          this.style.opacity = 1;
        });
        imgEle.addEventListener('mouseleave', function(e) {
          this.style.opacity = 0.5;
        })
        parentVideo.appendChild(imgEle);
      })
  }