video.js 사용 ui 과정 변경

Video.js 는 웹 페이지 에 비디오 재생 기 를 삽입 하 는 일반적인 JS 라 이브 러 리 로 Video.js 는 브 라 우 저가 HTML 5 에 대한 지원 상황 을 자동 으로 감지 하고 HTML 5 가 지원 되 지 않 으 면 Flash 재생 기 를 자동 으로 사용 합 니 다.(i 저 버 전 을 지원 하려 면 5.4.3 버 전 을 다운로드 하 십시오)
잔말 말고 바로 코드 를 붙 여 드 리 겠 습 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered my-vedio" preload="auto" controls width="800" height="600" align="middle" poster="image/vedio.png" data-setup="{}">
  <source src="video/2.mp4" type="video/mp4" />
  <!--   hls  -->
  <source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" type="application/x-mpegURL">
  <!--   rtmp  -->
  <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv" />
</video>

포스터 속성 은 미리 보기 그림 을 설정 하 는 데 사 용 됩 니 다.
source 는 비디오 주 소 를 설정 하 는 데 사 용 됩 니 다.
비디오 의 기본 UI 가 져 오기

var myPlayer = videojs('my_video');
var c = myPlayer.controlBar.children();
console.log(c);

나 는 단지 비교적 어 리 석 은 방법 을 발견 했다.
console 에서 UI 배열 을 볼 수 있 습 니 다.변경 할 변 수 를 선택 하 십시오.예 를 들 어 전체 화면 아이콘 을 삭제 하고 전체 화면 이 벤트 를 다시 추가 하 는 것 입 니 다.

myPlayer.controlBar.removeChild(c[15]);
 var SBtn = myPlayer.controlBar.addChild('button');
 SBtn.addClass('vjs-fullscreen-control');
 SBtn.add<br>　　//       button   id  
 SBtn.setAttribute('id', 'fs');
 //         
 myPlayer.on('play', function(event) {
  event.preventDefault();
  /* Act on the event */
  played = true;
  console.log('play');
  $("#md-video-title").hide();
 });
 //          
 myPlayer.on('pause', function(event) {
  event.preventDefault();
  /* Act on the event */
  played = false;
  console.log('play');
  $("#md-video-title").show();
 });
 $("#fs").on('click', function(event) {
  console.log("    ");
  $('#myModal').modal('toggle')
  $("#hide-container").after($("#my_video"));
  $("#my_video").css({
   width: '1140',
   height: '600',
   'border-color':'#ffffff'
  });
  if (played) {
   myPlayer.play();
  }
 });

위 에서 말 한 것 은 소 편 이 소개 한 video.js 에서 ui 과정 을 바 꾸 는 것 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다!