2022-08-05

iOS Safariでvideo要素に設定した動画が表示されない

技術記事

<input type="file”>で同じファイルを選択できるようにする - なんでもノートに続きtipsの4個目。video要素のsrc属性を動的に変更したとき、iOS Safariで動画が表示されない事象に遭遇した。結論としてはvideo要素のsrc属性を動的に変更した場合は、load()メソッドを呼ぶ必要があった。以下、React + TypeScriptのサンプルコード。CodeSandboxを使ってみた（初めて使った）。12行目をコメントアウトすると選択した動画が表示されなくなる（はず）。

codesandbox.io

2022-08-05

<input type="file”>で同じファイルを選択できるようにする

技術記事

<video>に読み込んだ動画の秒数を取得する - なんでもノートに続きtipsの3個目。でファイルを選択し、再度同じファイルを選択しても1度目のvalueが残ってしまっているため、changeイベントが発火しない。対応方法は2つある。1つ目は1度目のchangeイベントの処理の最後にvalueに空文字列を設定する方法。以下、React + TypeScriptのサンプルコード。

const ref = React.useRef<HTMLInputElement>(null);

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  // ここに処理を書く

  if (ref.current) {
    ref.current.value ="";
  }
}

// …(略)…

<input ref={ref} type="file" onChange={onChange} />

2つ目はclickイベントでvalueに空文字列を設定する方法。以下、React + TypeScriptのサンプルコード。

const ref = React.useRef<HTMLInputElement>(null);

const onClick = () => {
  if (ref.current) {
    ref.current.value ="";
  }
}

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  // ここに処理を書く
}

// …(略)…

<input ref={ref} type="file" onClick={onClick} onChange={onChange} />

2022-08-05

<video>に読み込んだ動画の秒数を取得する

技術記事

<input type="file">で選択したファイルのサイズを取得する - なんでもノートに続きtips2個目。video要素に読み込んだ動画の秒数を取得する方法。durationchangeイベント発生時にdurationから読み取れる。以下、React + TypeScriptのサンプルコード。

import React, { useRef } from "react";

// …(略)… 

const ref = useRef<HTMLVideoElement>(null);

const onChangeVideoDuration = () => {
  if (ref.current) {
    const videoDuration = ref.current.duration;
    console.log(videoDuration);
  }
}

// 任意のタイミングでsrcを変更する
const onXXX = () => {
  if (ref.current) {
    ref.current.src = "sample.mp4";
    ref.current.addEventListener("durationchange", onChangeVideoDuration, { once: true });
  }
}

// …(略)…

<video ref={ref} />

2022-08-05

<input type="file">で選択したファイルのサイズを取得する

技術記事

最近使ったtipsを1つずつブログにまとめておこうと思う。1つ目はで選択したファイルのサイズを取得する方法。以下、React + TypeScriptでのサンプルコード。

const onChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
  const fileSize = e.target?.files?.[0]?.size;
  console.log(fileSize + " Bytes");
}

// …(中略)…

<input type="file" onChange={onChangeFile} />