tencent.jquery.pix.component 1.0.6-6.beta1

package/components/video/videoplayer.js

@@ -0,0 +1,425 @@
+import { $, windowEnv } from "../config";
+import VideoHTML from "./videohtml";
+import './videocss.scss'
+
+/**
+ * @typedef {"play" | "pause" | "stop" | "enterFullScreen" | "exitFullScreen"} VideoPlayerState
+ * 视频播放器状态
+ */
+
+/**
+ * 在页面上放置一个视频播放器组件（腾讯视频）
+ * @constructor
+ * @param {object} options 选项
+ * @param {string} options.container 容器元素的jquery选择器
+ * @param {string} options.vid 腾讯视频id
+ * @param {string} [options.previewUrl] 视频预览图
+ * @param {0|1} [options.videoType=1] 视频类型选项，0: 标清，1: 高清
+ * @param {number} [options.autoHideControlsDelayMs=5000] 自动隐藏控制条延迟时间，单位ms
+ * @param {boolean} [options.showProgressBar=true] 是否显示进度条
+ * @param {boolean} [options.clickToPause=false] 点击播放区域是否直接暂停，true: 直接暂停，false: 先展示控制条
+ * @param {(this: VideoPlayer, type: VideoPlayerState) => any} [options.stateChanged] 状态变化回调
+ */
+export function VideoPlayer(options) {
+    this.options = options
+    if (typeof this.options.stateChanged !== 'function') {
+        this.options.stateChanged = () => {};
+    }
+    this.init()
+}
+
+VideoPlayer.prototype.init = async function() {
+    if (windowEnv === 'h5') {
+        this.durationFactor = 1; // 浏览器，单位s
+    } else {
+        this.durationFactor = 1000; // PixUI，单位ms
+    }
+
+    const $container = $(this.options.container);
+    this.$container = $container;
+    $container.html(VideoHTML);
+
+    if (this.options.previewUrl) {
+        $container.find('.myplayer-video-preview').css('background-image', `url(${this.options.previewUrl})`);
+    }
+
+    // 缺省选项
+    this.options = {
+        videoType: 1,
+        autoHideControlsDelayMs: 5000,
+        showProgressBar: true,
+        clickToPause: false,
+        ...this.options
+    }
+
+    const videoURL = await getVideoURL(this.options.vid, this.options.videoType);
+    $container.find('.myplayer-video-mask').before(`<video src="${videoURL}"></video>`);
+
+    this.state = {
+        playing: false,
+        controlsVisible: false,
+        updatingProgress: false,
+        controlsDelayStart: 0,
+        firstPlay: true,
+    }
+
+    // 根据showProgressBar选项控制进度条显示
+    if (!this.options.showProgressBar) {
+        $container.find('.myplayer-progress').hide();
+    }
+
+    this.bindEvent();
+}
+
+VideoPlayer.prototype.bindEvent = function() {
+    const container = this.$container;
+    container.off()
+        .on('click', '.myplayer-video-cover', () => {
+            this.play();
+        })
+        .on('click', '.myplayer-video-mask', () => {
+            this.maskClicked();
+        })
+        .on('click', '.myplayer-btn-play', () => {
+            this.play();
+        })
+        .on('click', '.myplayer-btn-pause', () => {
+            this.pause();
+        })
+        .on('click', '.myplayer-btn-full-screen', () => {
+            this.toggleFullScreen();
+        })
+        .on('click', '.myplayer-btn-exit-full-screen', () => {
+            this.toggleFullScreen();
+        })
+        .on('canplay', 'video', () => {
+            console.log('canplay');
+            this.updateTotalTime();
+        });
+
+    // 只有在显示进度条时才绑定进度条相关事件
+    if (this.options.showProgressBar) {
+        container
+            .on('dragstart', () => { console.log('video container dragstart') }, true)
+            .on('drag', () => { console.log('video container drag') }, true)
+            .on('dragend', () => { console.log('video container dragend') }, true)
+            .on('click', () => { console.log('video container click') }, true)
+            .on('dragstart', '.myplayer-progress', (e) => {
+                if (e.originalEvent) {
+                    this.progressDragStart(e.originalEvent);
+                } else {
+                    this.progressDragStart(e);
+                }
+            })
+            .on('drag', '.myplayer-progress', (e) => {
+                if (e.originalEvent) {
+                    this.progressDrag(e.originalEvent);
+                } else {
+                    this.progressDrag(e);
+                }
+            })
+            .on('dragend', '.myplayer-progress', (e) => {
+                if (e.originalEvent) {
+                    this.progressDragEnd(e.originalEvent);
+                } else {
+                    this.progressDragEnd(e);
+                }
+            })
+            .on('click', '.myplayer-progress', (e) => {
+                if (e.originalEvent) {
+                    this.progressDragEnd(e.originalEvent);
+                } else {
+                    this.progressDragEnd(e);
+                }
+            });
+    }
+}
+
+VideoPlayer.prototype.play = function() {
+    if (this.state.firstPlay) {
+        this.state.firstPlay = false;
+        this.$container.find('.myplayer-video-cover,.myplayer-video-preview').hide();
+        this.updateTotalTime();
+    }
+    const video = this.$container.find('video')[0];
+    video.play();
+    this.state.playing = true;
+    this.$container.find('.myplayer-btn-play').hide();
+    this.$container.find('.myplayer-btn-big-play').addClass('myplayer-transparent');
+    this.$container.find('.myplayer-btn-pause').show();
+    this.$container.find('.myplayer-progress').css('transform', 'none');
+    this.startUpdatingProgress();
+    this.hideControlsWithDelay();
+    this.options.stateChanged.call(this, 'play');
+}
+
+VideoPlayer.prototype.pause = function() {
+    this.showControls();
+    const video = this.$container.find('video')[0];
+    video.pause();
+    this.state.playing = false;
+    this.$container.find('.myplayer-btn-play').show();
+    this.$container.find('.myplayer-btn-big-play').removeClass('myplayer-transparent');
+    this.$container.find('.myplayer-btn-pause').hide();
+    this.$container.find('.myplayer-progress').css('transform', 'scaleY(2)');
+    this.state.controlsDelayStart = Date.now();
+    this.options.stateChanged.call(this, 'pause');
+}
+
+VideoPlayer.prototype.stop = function() {
+    const video = this.$container.find('video')[0];
+    video.pause();
+    video.currentTime = 0;
+    this.state.playing = false;
+    this.$container.find('.myplayer-btn-play').show();
+    this.$container.find('.myplayer-btn-big-play').removeClass('myplayer-transparent');
+    this.$container.find('.myplayer-btn-pause').hide();
+    this.$container.find('.myplayer-progress').css('transform', 'scaleY(2)');
+    this.state.controlsDelayStart = Date.now();
+    this.$container.find('.myplayer-video-cover,.myplayer-video-preview').show();
+    this.state.firstPlay = true;
+    this.options.stateChanged.call(this, 'stop');
+}
+
+VideoPlayer.prototype.maskClicked = function() {
+    console.log('maskClicked')
+    if (this.state.controlsVisible === true) {
+        if (this.state.playing === true) {
+            this.pause();
+        } else {
+            this.play();
+        }
+    } else {
+        if (this.options.clickToPause && this.state.playing === true) {
+            // 如果配置了点击直接暂停，且正在播放，则直接暂停
+            this.pause();
+        } else {
+            // 否则先展示控制条
+            this.showControls();
+        }
+    }
+}
+
+VideoPlayer.prototype.showControls = function() {
+    const container = this.$container;
+    container.find('.myplayer-video-mask').removeClass('myplayer-transparent');
+    container.find('.myplayer-top').removeClass('myplayer-transparent');
+    container.find('.myplayer-bottom').removeClass('myplayer-transparent');
+    this.state.controlsVisible = true;
+    this.state.updatingProgress = true;
+    this.updateTotalTime();
+    this.startUpdatingProgress();
+
+    this.hideControlsWithDelay();
+}
+
+VideoPlayer.prototype.hideControls = function() {
+    const container = this.$container;
+    container.find('.myplayer-video-mask').addClass('myplayer-transparent');
+    container.find('.myplayer-top').addClass('myplayer-transparent');
+    container.find('.myplayer-bottom').addClass('myplayer-transparent');
+    this.state.controlsVisible = false;
+    this.state.updatingProgress = false;
+}
+
+VideoPlayer.prototype.hideControlsWithDelay = function() {
+    this.state.controlsDelayStart = Date.now();
+    setTimeout(() => {
+        const nowTime = Date.now();
+        console.debug("nowTime - this.state.controlsDelayStart", nowTime - this.state.controlsDelayStart);
+
+        // 有时正常时间差也会小于设定的时间，所以判断时减去100ms
+        if (this.state.playing === true && nowTime - this.state.controlsDelayStart >= this.options.autoHideControlsDelayMs - 100) {
+            this.hideControls();
+        }
+    }, this.options.autoHideControlsDelayMs);
+}
+
+VideoPlayer.prototype.startUpdatingProgress = function() {
+    this.updateProgress();
+
+    if (this.state.updatingProgress) {
+        window.requestAnimationFrame(this.startUpdatingProgress.bind(this));
+    }
+}
+
+VideoPlayer.prototype.updateProgress = function() {
+    const video = this.$container.find('video')[0];
+    const currentTime = video.currentTime;
+    const duration = video.duration;
+    const progress = currentTime / duration;
+
+    const parentWidth = this.$container.find('.myplayer-progress').width();
+    this.$container.find('.myplayer-subprogress').width(`${progress * parentWidth}px`);
+
+    this.$container.find('.myplayer-playtime').html(formatTime(currentTime / this.durationFactor));
+}
+
+VideoPlayer.prototype.updateTotalTime = function() {
+    const video = this.$container.find('video')[0];
+    const duration = video.duration;
+
+    this.$container.find('.myplayer-totaltime').html(formatTime(duration / this.durationFactor));
+}
+
+VideoPlayer.prototype.toggleFullScreen = function() {
+    const $container = this.$container;
+    const fullScreenBtn = $container.find('.myplayer-btn-full-screen');
+    const exitFullScreenBtn = $container.find('.myplayer-btn-exit-full-screen');
+    const bottom = $container.find('.myplayer-bottom');
+    const innerContainer = $container.find('.myplayer-container');
+
+    if (innerContainer.hasClass('myplayer-full-screen')) {
+        innerContainer.removeClass('myplayer-full-screen');
+        bottom.removeClass('myplayer-full-screen');
+        fullScreenBtn.show();
+        exitFullScreenBtn.hide();
+        this.options.stateChanged.call(this, 'exitFullScreen');
+    } else {
+        innerContainer.addClass('myplayer-full-screen');
+        bottom.addClass('myplayer-full-screen');
+        fullScreenBtn.hide();
+        exitFullScreenBtn.show();
+        this.options.stateChanged.call(this, 'enterFullScreen');
+    }
+
+    this.hideControlsWithDelay();
+}
+
+VideoPlayer.prototype.setFullScreen = function (target = true) {
+    const $container = this.$container;
+    const fullScreenBtn = $container.find('.myplayer-btn-full-screen');
+    const exitFullScreenBtn = $container.find('.myplayer-btn-exit-full-screen');
+    const bottom = $container.find('.myplayer-bottom');
+    const innerContainer = $container.find('.myplayer-container');
+
+    if (!target && innerContainer.hasClass('myplayer-full-screen')) {
+        innerContainer.removeClass('myplayer-full-screen');
+        bottom.removeClass('myplayer-full-screen');
+        fullScreenBtn.show();
+        exitFullScreenBtn.hide();
+        this.options.stateChanged.call(this, 'exitFullScreen');
+    } else if (target && !innerContainer.hasClass('myplayer-full-screen')) {
+        innerContainer.addClass('myplayer-full-screen');
+        bottom.addClass('myplayer-full-screen');
+        fullScreenBtn.hide();
+        exitFullScreenBtn.show();
+        this.options.stateChanged.call(this, 'enterFullScreen');
+    }
+
+    this.hideControlsWithDelay();
+}
+
+/**
+ * 进度条拖动开始
+ * @param {MouseEvent} e 
+ */
+VideoPlayer.prototype.progressDragStart = function(e) {
+    if (!this.options.showProgressBar) {
+        return;
+    }
+    
+    this.state.updatingProgress = false;
+    if (this.state.playing === true) {
+        this.pause();
+    }
+}
+
+/**
+ * 进度条拖动
+ * @param {MouseEvent} e 
+ */
+VideoPlayer.prototype.progressDrag = function(e) {
+    if (!this.options.showProgressBar) {
+        return;
+    }
+    
+    const $container = this.$container;
+    const progress = $container.find('.myplayer-progress');
+    const subprogress = $container.find('.myplayer-subprogress');
+    const video = $container.find('video')[0];
+
+    const parentWidth = progress.width();
+    const curOffset = Math.max(Math.min(e.offsetX, parentWidth), 0);
+    subprogress.width(`${curOffset}px`);
+    const adjustedPlayTime = curOffset / parentWidth * video.duration;
+    $container.find('.myplayer-playtime').html(formatTime(adjustedPlayTime / this.durationFactor));
+}
+
+/**
+ * 进度条拖动结束
+ * @param {MouseEvent} e 
+ */
+VideoPlayer.prototype.progressDragEnd = function(e) {
+    if (!this.options.showProgressBar) {
+        return;
+    }
+    
+    const $container = this.$container;
+    const video = $container.find('video')[0];
+    const progress = $container.find('.myplayer-progress');
+    const parentWidth = progress.width();
+    const curOffset = Math.max(Math.min(e.offsetX, parentWidth), 0);
+
+    // currentTime set 单位s, get 单位ms
+    video.currentTime = curOffset / progress.width() * video.duration / this.durationFactor;
+
+    this.play();
+    
+    this.state.updatingProgress = true;
+    this.startUpdatingProgress();
+}
+
+/**
+ * 获取视频真实地址
+ * @param {string} vid 腾讯视频vid
+ * @param {0|1} [type] 类型，0: 标清，1: 高清
+ * @returns {Promise<string>} 真实视频地址
+ */
+const getVideoURL = async function(vid, type = 1) {
+    const sApiUrl = `https://vv.video.qq.com/getinfo?vid=${vid}&platform=101001&charge=0&otype=json&t=${Date.now()}`;
+
+    try {
+        console.log('processing vid through sApiUrl: ', sApiUrl);
+        const res = await fetchData(sApiUrl);
+        console.log('222 processing vid through sApiUrl: ', sApiUrl);
+        const processedStr = res.replace('QZOutputJson=', '');
+        const jsonStr = processedStr.substring(0, processedStr.length - 1);
+        const resObj = JSON.parse(jsonStr);
+        const sRealUrl = `${resObj.vl.vi[0].ul.ui[type].url}${resObj.vl.vi[0].fn}?vkey=${resObj.vl.vi[0].fvkey}`;
+        console.log('腾讯视频真实地址: ', sRealUrl);
+        return sRealUrl;
+    } catch (err) {
+        console.error(err)
+        return '';
+    }
+}
+
+/**
+ * 异步get请求
+ * @param {string} url
+ * @returns {Promise<string>}
+ */
+const fetchData = function(url) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.send();
+
+    return new Promise((resolve, reject) => {
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    resolve(xhr.responseText); // 请求成功，返回响应内容
+                } else {
+                    reject(new Error('请求失败')); // 请求失败，返回错误对象
+                }
+            }
+        };
+    });
+}
+
+const formatTime = function(secs) {
+    const minutes = Math.floor(secs / 60);
+    const seconds = Math.floor(secs % 60);
+    return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+}