【mac】PC画面を録画してサイトに埋め込む方法 – QuickTimePlayer
2017年10月29日
Macのpc画面を録画してサイトに埋め込みたいことがあったので、その方法を備忘録として残しておきたいと思います。
今回、画面録画するソフトとしてQuickTimePlayerを使用しました。
QuickTimePlayerをダウンロード
さっそく画面を録画するソフトのQuickTimePlayerをダウンロードします。
QuickTimePlayerのダウンロードURL
スポンサードサーチ
QuickTimePlayerの起動・使い方
1、アプリケーションフォルダにダウンロードされるので、早速起動してみましょう。

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

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

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

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

6、撮影した画面動画を保存
command + s で好きな場所に保存ができます。拡張子がmovになっているかと思います。
これで、macの画面を録画することができました!さてこれをサイトに埋め込むか!!
と思ったのですが、ファイルサイズが重い。。
mov拡張子をmp4へ変換、圧縮する手順を書いたのでファイルサイズを圧縮する際はmov形式をmp4へ変換、圧縮する方法の記事をご確認ください。
videoタグを使ってサイト内に録画した動画を埋め込む
結論から言うと、下記を追加するだけで埋め込むことができます。
1 2 3 |
<video autoplay loop controls> <source src="sample.mov"> </video> |
その他videoタグの属性については以下をご参考ください。
■width・・・動画の幅を設定
■height・・・動画の高さを設定
■autoplay・・・ページを開いたときに動画を自動再生させる
■controls・・・動画のコントロールパネルを表示
■loop・・・繰り返して再生させる
■muted・・・動画音声のミュート設定
■poster・・・動画を読み込めない、再生できないときに表示させる画像の設定
■preload・・・ページ読み込み時に、動画をあらかじめ読み込むかどうかを設定
これで無事、録画した画面キャプチャをサイト内に埋め込むことができました!