Open5

動画の再生をiframeからhlsに変更

諒諒

コントローラ表示、自動再生、ミュート、playinline(ios用、動画を自動で全画面にしない設定)

video#videoPlayer[controls=true autoplay=true muted=true playsinline=true]

videoの設定

= javascript_include_tag 'https://cdn.jsdelivr.net/npm/hls.js@latest'

const video = document.getElementById('videoPlayer');
if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('https://player.vimeo.com/external/vimeo_id.m3u8?s=xxxxxxxx&logging=false');
    hls.attachMedia(video);
}

vimeoのURL
動画のID.m3u8と署名のs=の部分が必要。
なくてもいけるかなと思ってs=のクエリを消したら動画再生できなかった。。笑

諒諒

元々flutterのwebviewの中でiframeを利用して動画再生の機能を実装していたが、
video_playerのライブラリでhls形式で動画を再生する形に変更することにした。
Controllerの設定

videoPlayerController = VideoPlayerController.networkUrl(Uri.parse('vimeoのhlsのURL'));
videoPlayerController.initialize().then((_) {
  chewieController = ChewieController(
    videoPlayerController: videoPlayerController,
    autoPlay: true,
    showControls: true,
    allowMuting: true,
  );
  videoPlayerController.setVolume(0);
  setState(() {});
});

利用箇所
初期化、動画の読み込みが完了するまではローディングを表示する

chewieController != null && chewieController!.videoPlayerController.value.isInitialized ? Chewie(controller: chewieController!) : const Loading(),
諒諒

vimeoからAPIでhlsのリンクを取得する方法

vimeoのデベロッパーサイトからapi appを作成
https://developer.vimeo.com/
アクセストークン発行
video_filesの権限が必須

https://api.vimeo.com/me/videos/1234567?fields=files

fieldsで必要な情報のみを返してもらうようにする

諒諒

ヘッダーの中にAPIを叩くことができるレート制限が返ってくる
limitが上限、remainingが現状後何回叩けるかがわかる
大量にAPIを叩きたいときはここと相談しつつ進める
アカウントのレベルによって回数が変わる
無料だと50件まで

x-ratelimit-limit　50
x-ratelimit-remaining　46