vue 2.0+vue-video-player 구현 hls 재생 전 과정

원인
최근 에 회 사 는 비디오 리퀘스트 서 비 스 를 하려 고 한다.원가 문 제 를 고려 하여 지도 자 는 모든 것 을 오픈 소스 시스템 으로 완성 하 기 를 희망 하기 때문이다.이 출발점 을 바탕 으로 각 클 라 우 드 영상 플랫폼(텐 센트 클 라 우 드 영상 리퀘스트 VOD,왕 이 클 라 우 드 영상,칠 우 클 라 우 드,알 리 클 라 우 드 영상 서비스 등)을 제외 했다.사실 여기 서 저 는 클 라 우 드 영상 플랫폼 을 구 매 하 는 것 을 제안 합 니 다.왜냐하면 제 가 바퀴 를 만 드 는 것 은 다른 사람 이 만 든 것 이 없 기 때 문 입 니 다.(전문 연구 팀 을 제외 하고 이 업 무 를 생활 하 는 회 사 를 제외 하고)그리고 클 라 우 드 영상 플랫폼 서비스 업 체 가 제공 하 는 것 은 모두 하나의 해결 방안 입 니 다.수집,저장,코드 전환,재생 기 등 이 고 cdn 과 탄력 적 인 확대 에 있어 가장 큰 보장 을 받 을 수 있 습 니 다.
준비 하 다.
비디오 리퀘스트 는 적어도 두 가지 가 필요 하 다.스 트 리밍 서비스,비디오 플레이어 이다.이것 은 전단 플레이 어 를 다 루 는 게시 물이 기 때문에 스 트 리밍 서비스 구축 에 대해 저 는 패스 를 했 습 니 다.나중에 시간 이 있 으 면 새 댓 글 을 보충 하 겠 습 니 다.
회사 의 전단 구 조 는 vue 가족 통 을 사용 하기 때문에 vue 를 기반 으로 한 비디오 재생 기 를 찾 고 싶 습 니 다.
먼저 vue 커 뮤 니 티 에서vue-dplayer를 찾 았 습 니 다.그래서 인 스타 그램 에서 로 컬 테스트 를 했 습 니 다.이때 문제 가 발생 했 습 니 다.이 플레이 어 는 hls 프로 토 콜 을 기반 으로 하 는 m3u 8 파일 을 재생 할 때(비디오 파일 이 스 트림 미디어 서비스 에 성공 적 으로 배치 되 었 음)ios 에서 정상적으로 재생 할 수 있 지만 pc 의 chrome 에 서 는 지원 되 지 않 습 니 다.그리고 저 는 github 에 가서 자 료 를 찾 았 습 니 다.자료 에 따 르 면 Dplay(vue-dplayer 는 Dplay 에 의 해 봉 인 된 것)는 hls 를 지원 하 는 것 이 고 hls.js 를 도입 한 다음 에 hls 로 video 대상 을 처리 해 야 합 니 다.hls.js 와 Dplayer 예제 코드 는 video 대상 을 대상 으로 처리 되 기 때문에 프로젝트 에 도입 하려 면 vue-dplayer 의 속성 을 수정 해 야 합 니 다.시간 이 촉박 하기 때문에 먼저 포기 하 겠 습 니 다.
왜 썼어 요이미?
1.제 가 구축 한 스 트 리밍 서비스 관리 페이지 의 재생 기 는 바로 videoJs(vue-video-player 는 videoJs 에 의 해 봉 인 된 것)로 사용 한 후에 기분 이 좋 습 니 다.
2.바 이 두 가"vue video"를 입력 하면 vue-video-player 가 맨 위 에 있 습 니 다.(하하,이렇게 편 하 게)
3.물론 보 았 습 니 다vue-video-player.지지 하 는 협의 가 완비 되 었 습 니 다.
4.vue-video-player 의 github 에 일부 issues 가 닫 히 지 않 았 지만 videoJs 의 강력 한 라 이브 러 리 와 수천 명의 사용자 가 문 제 를 해결 할 수 있다 고 생각 합 니 다.(미 친 자신 감 이 야)
정돈 하 다
설치 의존

npm install vue-video-player --save

도입 스타일

//     videoJs   ，    vue-video-player   ，                      ，      main.js 
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

VueVideoPlayer 를 가 져 와 vue 에 걸 기

// main.js 
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);

업무 구성 요소 myPlayer.vue 작성

<template>
 <div class="container">
 <div class="player">
  <video-player class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
  >
  </video-player>
 </div>
 </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';
export default {
 data () {
 return {
  playerOptions: {
//  playbackRates: [0.7, 1.0, 1.5, 2.0], //    
  autoplay: false, //  true,           。
  muted: false, //              。
  loop: false, //             。
  preload: 'auto', //       <video>                 。auto         ,        （       ）
  language: 'zh-CN',
  aspectRatio: '16:9', //           ，                 。          -           （  "16:9" "4:3"）
  fluid: true, //  true ，Video.js player       。    ，             。
  sources: [{
   type: "application/x-mpegURL",
   src: "video.m3u8" //  m3u8  （  ）
  }],
  poster: "poster.jpg", //      
  width: document.documentElement.clientWidth,
  notSupportedMessage: '        ，     ', //    Video.js               。
//  controlBar: {
//   timeDivider: true,
//   durationDisplay: true,
//   remainingTimeDisplay: false,
//   fullscreenToggle: true //    
//  }
  }
 }
 },
 components: {
 videoPlayer
 },
 methods: {
 onPlayerPlay(player) {
  alert("play");
 },
 onPlayerPause(player){
  alert("pause");
 },
 },
 computed: {
 player() {
  return this.$refs.videoPlayer.player
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
 .container {
 background-color: #efefef;
 min-height: 100%;
 }
</style>

주의:
1.video-player 태그 의 class 는'video-player vjs-custom-skin'으로 설정 해 야 도입 한 스타일 이 작 동 합 니 다.내 가 처음 만 들 었 을 때,직접 복사 한 github 페이지 의 코드,그 코드 의 class 는 video-player-box 였 다.
2.데모 페이지에 따라 속성 을 수정 합 니 다.여기에 주석 을 좀 달 았 으 니 참고 할 수 있 습 니 다.
3.src,poster 속성 을 서버 자원 주소 로 변경 합 니 다.
hls 지원 증가

//    
npm install --save videojs-contrib-hls

// main.js   
require('videojs-contrib-hls/dist/videojs-contrib-hls');

서비스 시작,효과 보기

npm run dev

videoJs 의 재생 단 추 는 기본적으로 타원형 이 고 개인 적 으로 익숙 하지 않 아서 원형 으로 수정 되 었 습 니 다.
css 스타일 추가

.video-js .vjs-big-play-button{
  /*
          
  */
 height: 2em;
 width: 2em;
 line-height: 2em;
 border-radius: 1em;
 }

주의:
my Player.vue 구성 요소 에 직접 스타일 을 추가 하면 덮어 씁 니 다.scoped 속성 이 증가 하 든 안 하 든 vue 가 스타일 을 불 러 오 는 순서 에 달 려 있 습 니 다.전에 자 료 를 찾 아 댓 글 을 봤 는데 잘 했 습 니 다.안 타 깝 게 도 찾 을 수 없습니다.
나의 최종 해결 방안 은 css 파일 을 사용자 정의 하여 require 를 사용 하여 main.js 에 도입 하여 상기 스타일 이 도 입 된 후에 두 는 것 입 니 다.

require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
require('@/../static/css/myVideoCss.css');

큰 버그:재생 단추 가 fastclick 와 충돌 합 니 다.
충돌 은 이 렇 습 니 다.재생 기 는 모 바 일 브 라 우 저 나 chrome 개발 자 도구(모 바 일 사이즈)에서 재생 단 추 를 누 르 면 재생 과 일시 정지 이벤트 가 여러 번 발생 합 니 다.
처음에는 무슨 이유 인지 모 르 겠 지만 github 에 issure 를 제 기 했 습 니 다.제 기 를 마치 자마자 지난 번 에 닫 힌 issure 가 해결 한 것 이 바로 이 문제 입 니 다.여기 서 작가 님 께 사 과 드 려 서 막 혔 습 니 다.하하.그래서 나 는 다른 사람 이 준 답 을 보 았 다.fastclick 플러그 인과 충돌 했다.그러나...해결 방안 이 없 었 다.그리고 나 서 나 는 fastclick 에 주석 을 달 아 보 았 는데,과연 그것 이 영향 을 미 쳤 다.
그리고 나 서 나 는videoJS Api가서 보 았 다.페이지 는 분명히 말 했다.트리거 요소 에 needsclick 의 class 를 추가 하면 된다.
하지만 나 는 오랫동안 해 보 았 지만 성공 하지 못 했다.이때fastclick github 주소를 보고 fastclick 의 소스 코드 과정 을 대체적으로 살 펴 보 았 다.그리고 저 자 는"Fastclick 은 this.needs Click 을 ontouchEnd 끝 에 놓 고 실행 해서 앞에서 말 한 것 에'needsclick'이라는 이름 을 붙 여도 무효 가 되 었 다"고 말 했다.그래서 fastclick 의 원본 코드 를 수정 하고 검증 해 보고 싶 습 니 다.
나 는 전체 faseclick.js 를 복사 하고 require 방식 으로 인용 했다.

const FastClick = require('@/../static/js/fastclick.js');
FastClick.attach(document.body);

코드 를 열 어 왜 needsclick 이 효과 가 없 는 지 추측 하여 이 단 어 를 직접 검색 해 보 았 습 니 다.FastClick.prototype.needs Click 방법의 마지막 에 검증 이 있 습 니 다.

return (/\bneedsclick\b/).test(target.className);

우선 FastClick.prototype.needs Click 방법 은 요소 가 관통 기능 을 유지 해 야 하 는 지 를 판단 하 는 것 이 며,마지막 줄 은 트리거 된 요 소 를 검증 하 는 class 가 needsclick 을 포함 하고 있 는 지 아 닌 지 를 확인 하 는 것 입 니 다.그래서 제 가 트리거 한 요소 에 클 라 스 를 추가 하지 않 았 는 지 먼저 추측 해 봤 습 니 다.그래서 console 는 target.className 을 만 들 었 습 니 다.

과연 없 었 고 규칙 을 발 견 했 습 니 다.제 가 제어 해 야 할 단 추 는 모두 vjs 로 시작 되 었 기 때문에 검증 에 있어 서 검증 을 하나 더 추가 하 겠 습 니 다.

return ((/\bneedsclick\b/).test(target.className) || (/\bvjs/).test(target.className));

문제 해결 은 물론 문 제 를 해결 하 는 방식 이 폭력 적 이 었 기 때문에 여기 서 저 는 이 글 이 도움 이 되 는 학생 들 이 이 를 바탕 으로 계속 보완 할 수 있 기 를 바 랍 니 다.여기까지 만 다 녀 올 게 요.마지막 으로 버 전 붙 여 주세요.

 "fastclick": "^1.0.6",
 "videojs-contrib-hls": "^5.12.2",
 "vue": "^2.2.2",
 "vue-router": "^2.2.0",
 "vue-video-player": "^4.0.6",

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.