vimeo player mobile

mobile chrome, mobile  safari 에서 플레이 버튼을 누르게 되면 시작과 동시에 전체 화면으로 전환이 된다. 

예전에는 가능 했던 자동 시작 및 자동 전체 화면은 브라우저 보안 정책에 따라 안되는것 같다.

 

 

1. Html

<!-- #t 파라미터로 특정 시점 부터 재생이 가능. ex) #t=1m10s -->
<iframe
    src="https://player.vimeo.com/video/<동영상아이디>#t=10s?autoplay=1&autopause=0&loop=0&playsinline=0"
    width="500"
    height="250"
    frameborder="0"
    allow="autoplay; fullscreen"
    webkitallowfullscreen
    mozallowfullscreen
    allowfullscreen>

 

2. Javascript

var player01 = new Vimeo.Player(document.querySelector("iframe"));
player01.ready().then(function() {
  player01.setVolume(1); // 0 or 1
  // 특정 시점 부터 재생 시작 : 초단위
  player01.setCurrentTime(10).then(function() {
  	return player01.play();
  });
});

// 재생
player01.on('play', function() {
  player01.getVideoTitle().then(function(title) {
  	console.log(title + " 재생중" );
  });
});

// 재생 시간
player01.on('timeupdate', function() {
  player01.getCurrentTime().then(function(sec) {
  	console.log(sec);
  });
});

// 일시 정지 이벤트
player01.on('pause', function() {
	console.log('일시 정지');
});

// 재생 완료 이벤트
player01.on('ended', function() {
	console.log('재생 완료');
});


// 무슨 이벤트야...
player01.on('progress', function(progress) {
	console.log(progress)
});