scss 视频拇指生成器Youtube / Vimeo

Posted 2021-05-17

import axios from 'axios';
import { convertMinsToHrsMins } from './_helpers';

function parseVideo(url) {
  url.match(
    /(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/,
  );

  if (RegExp.$3.indexOf('youtu') > -1) {
    var type = 'youtube';
  } else if (RegExp.$3.indexOf('vimeo') > -1) {
    var type = 'vimeo';
  }

  return {
    type,
    id: RegExp.$6,
  };
}

function getVideoThumbnail(url) {
  const videoObj = parseVideo(url);
  if (videoObj.type == 'youtube') {
    return `//img.youtube.com/vi/${videoObj.id}/maxresdefault.jpg`;
  }
  if (videoObj.type == 'vimeo') {
    return axios.get(`https://vimeo.com/api/v2/video/${videoObj.id}.json`)
      .then(data => data.json())
      .then(data => data ? data[0].thumbnail_large : '')
      .catch(error => {
        console.log(error.response)
      });
  }
}

function vimeoGetVideoData(url) {
  const videoObj = parseVideo(url);
  return axios.get(`https://vimeo.com/api/v2/video/${videoObj.id}.json`)
    .then(data => data.json())
    .then(data => data ? data[0] : '')
    .catch(error => {
      console.log(error.response)
    });
}

function vimeoGetVideoLenght(url) {
  const videoObj = parseVideo(url);
  return axios.get(`https://vimeo.com/api/v2/video/${videoObj.id}.json`)
    .then(response => response.data[0].duration)
    .then(response => response ? convertMinsToHrsMins(response) : '')
    .catch(error => {
      console.log(error.response)
    });
}

export {
  parseVideo,
  getVideoThumbnail,
  vimeoGetVideoData,
  vimeoGetVideoLenght,
};

import { getVideoThumbnail } from './vendor/videoThumb';

const profile = document.getElementById('single');

  if (profile) {
    const thumb = profile.querySelector('.destaque figure');
    const video = profile.querySelector('iframe').getAttribute('src');
    const overlay = profile.querySelector('.destaque .overlay-desc');
    const iframe = profile.querySelector('iframe');
    const player = new Player(iframe);

    getVideoThumbnail(video)
      .then(response => thumb.querySelector('img').setAttribute('src', response));

    overlay.addEventListener('click', (e) => {
      e.target.parentNode.remove();
      thumb.remove();
      player.play();
    });
  }

 <div class="video-container video-container--16-9">
    <iframe src="https://player.vimeo.com/video/218623449" frameborder="0" webkitallowfullscreen
      mozallowfullscreen allowfullscreen></iframe>
      <figure><img src="" alt=""></figure>
    <div class="overlay-desc">
        <header>
            <p>Aprecie aqui o novo ensaio da musa Anna Laura</p>
        </header>
        <i class="fa fa-play-circle"></i>
        <img src="./img/branding.png" alt="">
    </div>
</div>

.video-container {
    overflow: hidden;
    position: relative;
    position: relative;

    &.no-fullscreen {
        background: black;

        &.video-container--16-9 {
            padding-top: percentage(7/16);
        }
    }

    &--16-9 {
        padding-top: percentage(9/16);
    }

    &--4-3 {
        padding-top: percentage(3/4);
    }

    iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    figure {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;

        >img {
            width: 100%;
        }
    }
}