【mac】PC画面を録画してサイトに埋め込む方法 – QuickTimePlayer

2017年10月29日

サンプルページ

Macのpc画面を録画してサイトに埋め込みたいことがあったので、その方法を備忘録として残しておきたいと思います。
今回、画面録画するソフトとしてQuickTimePlayerを使用しました。

QuickTimePlayerをダウンロード

さっそく画面を録画するソフトのQuickTimePlayerをダウンロードします。

QuickTimePlayerのダウンロードURL

スポンサードサーチ

QuickTimePlayerの起動・使い方

１、アプリケーションフォルダにダウンロードされるので、早速起動してみましょう。

２、QuickTime Playerを起動後したら、左上にあるファイル　→　新規画面収録をクリックします。

３、録画ボタンが表示されるので、赤丸の部分をクリック

４、テキストが表示されるので下記のいずれかで収録方法を選択
フルスクリーン収録：画面をクリック（どこでもok）
画面の一部を収録：収録エリアをドラッグ指定

５、停止ボタンをクリック
録画を終了したい場合は、画面右上にある停止ボタンをクリックします。（ちょっと分かりづらい、、）

６、撮影した画面動画を保存
command + s で好きな場所に保存ができます。拡張子がmovになっているかと思います。

これで、macの画面を録画することができました！さてこれをサイトに埋め込むか！！
と思ったのですが、ファイルサイズが重い。。

mov拡張子をmp4へ変換、圧縮する手順を書いたのでファイルサイズを圧縮する際はmov形式をmp4へ変換、圧縮する方法の記事をご確認ください。

videoタグを使ってサイト内に録画した動画を埋め込む

結論から言うと、下記を追加するだけで埋め込むことができます。

サンプルページ

その他videoタグの属性については以下をご参考ください。

■width・・・動画の幅を設定
■height・・・動画の高さを設定
■autoplay・・・ページを開いたときに動画を自動再生させる
■controls・・・動画のコントロールパネルを表示
■loop・・・繰り返して再生させる
■muted・・・動画音声のミュート設定
■poster・・・動画を読み込めない、再生できないときに表示させる画像の設定
■preload・・・ページ読み込み時に、動画をあらかじめ読み込むかどうかを設定

これで無事、録画した画面キャプチャをサイト内に埋め込むことができました！