ブラウザで写真が撮れたらなぁという場面に出くわしたので、APIを確認したところ、navigator.getUserMedia()は非推奨で、今度からはnavigator.mediaDevices.getUserMedia()を使うようにとのこと 音声、画像をキャプチャするMedia Capture and Streams APIでスナップショットを撮ってみました。 ソースコード ガワの準備 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MediaDevices.getUserMedia()</title> </head> <body> <button onclick="startVideo()">ビデオ開始！</button> <button onclick="stopVideo()">ビデオ終了！</button>
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
