ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

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

2017年10月29日
logo_QuickTimePlayer

サンプルページ

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

QuickTimePlayerをダウンロード

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

QuickTimePlayerのダウンロードURL

https://support.apple.com/kb/DL923?locale=ja_JP&viewlocale=ja_JP

スポンサードサーチ

QuickTimePlayerの起動・使い方

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

quick01

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

quick02

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

quick03

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

quick04

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

quick05

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・・・ページ読み込み時に、動画をあらかじめ読み込むかどうかを設定

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

関連記事

  • 【mac】.gitattributes ファイルが何処にあるか分からない、を解決する方法2017年5月29日 【mac】.gitattributes ファイルが何処にあるか分からない、を解決する方法
  • logo_mamp2017年5月10日 【mac】MAMPのローカル環境でルートパスを使えるようにする方法
  • VirtualBoxを使ってmacに Internet Explorer (IE8,9,10,11,Edge)環境を構築する方法2017年5月28日 VirtualBoxを使ってmacに Internet Explorer (IE8,9,10,11,Edge)環境を構築する方法
  • 【mac】テキストエディタとブラウザを交互に操作すると入力モードが勝手に切り替わる!? そんな時の対処法2017年9月3日 【mac】テキストエディタとブラウザを交互に操作すると入力モードが勝手に切り替わる!? そんな時の対処法
  • Macでイヤホンから音が聞こえない!?そんな時の対処法2018年10月2日 Macでイヤホンから音が聞こえない!?そんな時の対処法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.