videoタグにて動画などを表示させる際にcurrentTimeを指定することで再生範囲の指定が出来ます。
しかしスライダーなどを操作することで指定範囲以外の表示も可能となります。
動画の指定範囲のみを表示させたい場合は、動画から指定範囲を抽出した別の動画ファイルを生成するしか現状では方法は無いと考えて良いでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
<video />
や <audio />
の HtmlMediaElement はシークバーの操作を行った後に seeked
イベントを発火します。そのイベントに任意の再生時間 A から B の範囲外であれば、 currentTime を A から B に収まる値にするリスナーを適用してあげれば目的は実現できます。
これだけだと、シークバーを操作せずに任意の再生時間の範囲外まで再生されたときには対応できないので、再生中に常に発火するイベントがあるので(たしか timeupdate
か playing
)そちらでも同様の処理をすればよいです。
HTMLMediaElement: seeked event - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event
React 使ってますけど試しに書いてみました。
React 使おうが使わまいが handleTimeUpdate
でやってることは変わらないと思います。
https://codepen.io/og24715/pen/ymeXeK?editors=0010
const
1 2const VideoPlayer = ({ a, b }) => { 3 const handleTimeUpdate = (e) => { 4 const time = e.target.currentTime; 5 if (b < time) { 6 e.target.pause(); 7 e.target.currentTime = b; 8 } else if (time < a) { 9 e.target.pause(); 10 e.target.currentTime = a; 11 } 12 }; 13 14 return ( 15 <video 16 src={videoUrl} 17 controls 18 onTimeUpdate={handleTimeUpdate} /> 19 ); 20}; 21 22const App = () => { 23 const [a, setA] = React.useState(0); 24 const [b, setB] = React.useState(13); 25 26 const handleChangeA = (e) => setA(e.target.value); 27 const handleChangeB = (e) => setB(e.target.value); 28 29 return ( 30 <div> 31 <VideoPlayer a={a} b={b} /> 32 <form> 33 <p> 34 A 35 <input 36 type="range" 37 value={a} 38 min={0} 39 max={13} 40 onChange={handleChangeA} /> 41 {a} 42 </p> 43 <p> 44 B 45 <input 46 type="range" 47 value={b} 48 min={0} 49 max={13} 50 onChange={handleChangeB} /> 51 {b} 52 </p> 53 </form> 54 </div> 55 ); 56} 57 58ReactDOM.render( 59 <App />, 60 document.querySelector('#root'), 61);
投稿2019/07/23 08:26
編集2019/07/23 08:55総合スコア832
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/23 08:29
2019/07/24 05:01