videoタグの属性やJSを使用した動画のコントロール | デザインやWEBに関する情報を発信する【まるログ】
最近はWEBページを制作する際に、動画を埋め込むことが増えていると感じています。 ですので、今回は動画を制御する際に使用するJSを自分なりにまとめてみようと思います。 なお、今回の記事ではvideoタグで読み込んだものを対象にしますので、youtubeの埋め込みには使用できません。 videoタグの基本の書き方 <video src="〇〇.mp4" autoplay muted loop webkit-playsinline playsinline></video> 自分がよく書く書き方はこの様になっています。埋め込んだ動画を自動再生させるには、mutedを設定し、音を消しておかないと再生されないので注意してください。元動画の音の有無に関わらず、この設定は必要になります。playsinlineはiOSでページ内埋め込みさせるために必要になります。 次に、JSで制御させる方法を何個か紹介い
HTML5 VideoまとめとMediaElement.js
複数のコーデックが存在しており、ブラウザの対応状況もバラバラ。HTML5 Videoをサポートしない古いブラウザもあるため、そうしたブラウザに対してはFlashやSilverlightを受け皿として使う必要がある。またHTML5 VideoのUIは規定されておらず、ブラウザごとに違っている。UIを統一するにはJavaScript/CSSを使ったコーディングが必要。 対策1. ネストHTMLテクニック Video for Everybody!で紹介されているネストHTMLテクニックを使う。次のHTMLのようにvideo要素の内部に複数のコーデックファイルの指定とFlashを受け皿として記載するというもの。なおこのテクニックでは記述の順序にも意味がある。 <video width="640" height="360" controls> <source src="target.mp4" typ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
