まずは完成形をお見せしましょう。
ウツボの珍しい動画を題材とします。
２つの掲載の仕方を紹介します。
１つは、Webサイトのディレクトリに動画ファイルを置いて、それを読み込ませるタイプ。
もう１つは、Google Driveにある動画を引っ張ってきて、それを読み込ませるタイプです。
岩穴に潜んでいるウツボがこんな動きをするのは極めて珍しいのでは？！
釣りしてたらバチャバチャうるさいから海を見ると、なんとウツボが暴れていました。
小魚でも群れていたのか…それにしても、珍しいです。
サムネイル画像はかっこいいウツボですよ。
元の高画質動画は「ウツボダンス」です。
上にある動画がWebサイトのディレクトリに動画ファイルを置いて、それを読み込ませるタイプです。
比較的短い動画、言い換えるとサイズの小さい動画に向いているでしょうね。
このページで紹介するPythonで動画圧縮のプロセスを挟むのも、このやり方です。
岩穴に潜んでいるウツボがこんな動きをするのは極めて珍しいのでは？！
釣りしてたらバチャバチャうるさいから海を見ると、なんとウツボが暴れていました。
小魚でも群れていたのか…それにしても、珍しいです。
This is a video on Google Drive.
上にある動画がGoogle Driveにある動画を引っ張ってきて、それを読み込ませるタイプです。
サムネイルを付けることもできるけど、動画をストレートに掲載するのも悪くないと思いますよ？
この方法なら大きな動画もそのまま、遠慮なく載せられます。
どちらが良いかはその時次第ですね。
視聴者の閲覧を妨げる広告が出ないのはどちらも同じです。
では、コードや実装のやり方を見ていきましょう。
.JPG)
とりあえずサムネイル画像ですかね？
アスペクト比を守りつつ、サムネイル画像の大きさも調整しましょう。
一般的なHD（ハイビジョン）のアスペクト比は16:9。
解像度は1280×720となります。
上のウツボ動画は、動画本体とサムネイル画像のアスペクト比を合わせています。
これがあんまり大きく食い違ったりすると、クリックしたときに視聴者が戸惑うかもしれません。
まずは、Webサイトのディレクトリに動画ファイルを置いて、それを読み込ませるタイプのhtmlです。
動画はちょっと他のメディア要素と違うのでね。
特別枠と言いますか、周囲とは違う枠組みを使って掲載するようにしています。
もともと重量級のデータですから、ちゃんとサイズ調整のエンコードを事前に施してからアップする。
YouTubeも良いのですが、あれは広告が出るでしょう？
私がどーしても広告を貼りたいと考えた場合、ユーザーの視聴を妨げないように何かしら工夫するかな？
少なくとも動画はそのまま掲載しちゃいます。
<head>
<!--CSS-->
<link rel="stylesheet" href="../css/video.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!--JavaScript-->
<script src="../script/video.js"></script>
</head>
<div class="video-card">
<!-- 動画のタイトル -->
<h4 class="special-title">フィーネによる周回の動画１</h4>
<!-- 動画のルート説明 -->
<p>アナダンエントラーナ・塔〜迷路ルート</p>
<!-- 動画プレイヤー -->
<video id="myVideo" poster="../video/★５フィーネ・キャラ紹介.jpg" controls>
<!-- 動画ソースファイル -->
<source src="../video/アナダンエントラーナ・塔〜迷路フィーネ.mp4" type="video/mp4">
<!-- 動画タグに対応していないブラウザ向けのメッセージ -->
お使いのブラウザは動画タグに対応していません。
</video>
<!-- 高画質動画へのリンク -->
<p>元の高画質動画は「<a href="https://drive.google.com/file/d/1MG4sRfZ2UkeZjJM0LB14Iz75q1pZbasA/view?usp=drive_link">アナダンエントラーナ・塔〜迷路ルート</a>」です。</p>
<!-- スタイリッシュな区切り線 -->
<hr class="stylish">
<!-- 動画コントロールボタン -->
<div class="controls">
<button class="control-btn play-pause" onclick="playPause()">再生/一時停止</button>
<button class="control-btn stop" onclick="stopVideo()">停止</button>
<button class="control-btn mute-unmute" onclick="muteUnmute()">ミュート/ミュート解除</button>
<button class="control-btn pip" onclick="togglePip()">ピクチャインピクチャ</button>
</div>
</div>
このhtml内にある https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css というリンクは、Font
Awesomeというアイコンライブラリを示します。
このアイコンライブラリのCSSファイルを参照しているんですよね。
Font Awesomeは、さまざまなアイコンやイラストをウェブサイトやアプリケーションに簡単に追加できるようにするためのツールです。
具体的には、このCSSファイルはFont Awesomeの最新バージョン（6.0.0-beta3）のアイコンセットを含んでおり、ウェブページに組み込むことで、アイコンをスタイル化して表示しています。
こういう感じでWebサイトのUIを実装していきます。
YouTubeで動画掲載するスタイルが流行ってるから、ちょっとそれとは違った手法を紹介してみてます。
どーしても動画で稼ぎたいと私が考えたとすれば、こうやってやるよね。
広告は動画本体ではなく、別途サイトの隅っこに表示させるかな。
普通の動画を掲載するvideo.css
@charset "UTF-8";
/* ビデオカード全体のスタイル */
.video-card {
max-width: 80%; /* カードの最大幅を80%に設定 */
margin: 20px auto; /* 上下に20pxの余白を設定し、中央に配置 */
padding: 20px; /* 内側に20pxの余白を設定 */
border: 1px solid #ccc; /* 薄いグレーの枠線を設定 */
border-radius: 10px; /* 角を10px丸める */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を設定 */
background-color: #fff; /* 背景色を白に設定 */
position: relative; /* 相対位置を設定 */
}
/* タイトルのスタイル */
.video-card .special-title {
margin-bottom: 10px; /* 下側に10pxの余白を設定 */
margin-top: 5px; /* 上側の余白を5pxに調整 */
}
/* 段落のスタイル */
.video-card p {
color: #666; /* 文字色を薄いグレーに設定 */
margin-bottom: 20px; /* 下側に20pxの余白を設定 */
}
/* 動画のスタイル */
.video-card video {
width: 100%; /* 幅を100%に設定 */
height: auto; /* 高さを自動調整 */
border-radius: 10px; /* 角を10px丸める */
}
/* スタイリッシュな区切り線のスタイル */
hr.stylish {
border: 0; /* 枠線をなしに設定 */
height: 5px; /* 高さを5pxに設定 */
background: linear-gradient(to right, rgba(0, 255, 0, 0), rgba(0, 255, 0, 0.3), rgba(255, 0, 0, 0.3), rgba(255, 255, 0, 0.3), rgba(128, 128, 128, 0.3), rgba(128, 128, 128, 0)); /* グラデーション背景を設定 */
}
/* コントロールボタンのスタイル */
.controls {
display: flex; /* フレックスボックスを使用 */
justify-content: center; /* 中央に配置 */
flex-wrap: wrap; /* 複数行に折り返し可能に設定 */
}
.control-btn {
background-color: rgba(0, 123, 255, 0.7); /* 青色の背景色を設定 */
color: white; /* 文字色を白に設定 */
border: 2px solid rgba(0, 123, 255, 0.7); /* 枠線の色を設定 */
padding: 5px 5px; /* 内側に5pxの余白を設定 */
margin: 5px; /* 外側に5pxの余白を設定 */
border-radius: 5px; /* 角を5px丸める */
cursor: pointer; /* カーソルをポインターに設定 */
transition: background-color 0.3s ease, transform 0.3s ease; /* 背景色と変形の遷移を設定 */
}
/* 再生/一時停止ボタンのスタイル */
.play-pause {
background-color: rgba(40, 167, 69, 0.7); /* 緑色の背景色を設定 */
border: 2px solid rgba(40, 167, 69, 0.7); /* 緑色の枠線を設定 */
}
.play-pause:hover {
background-color: rgba(40, 167, 69, 0.9); /* ホバー時の背景色を濃く設定 */
}
.play-pause::before {
content: "\f04b"; /* Font Awesomeのアイコンを設定 */
font-family: "Font Awesome 5 Free"; /* Font Awesomeを使用 */
font-weight: 900; /* アイコンの太さを設定 */
margin-right: 5px; /* 右側に5pxの余白を設定 */
}
/* 停止ボタンのスタイル */
.stop {
background-color: rgba(220, 53, 69, 0.7); /* 赤色の背景色を設定 */
border: 2px solid rgba(220, 53, 69, 0.7); /* 赤色の枠線を設定 */
}
.stop:hover {
background-color: rgba(220, 53, 69, 0.9); /* ホバー時の背景色を濃く設定 */
}
.stop::before {
content: "\f04d"; /* Font Awesomeのアイコンを設定 */
font-family: "Font Awesome 5 Free"; /* Font Awesomeを使用 */
font-weight: 900; /* アイコンの太さを設定 */
margin-right: 5px; /* 右側に5pxの余白を設定 */
}
/* ミュート/ミュート解除ボタンのスタイル */
.mute-unmute {
background-color: rgba(255, 193, 7, 0.7); /* 黄色の背景色を設定 */
border: 2px solid rgba(255, 193, 7, 0.7); /* 黄色の枠線を設定 */
}
.mute-unmute:hover {
background-color: rgba(255, 193, 7, 0.9); /* ホバー時の背景色を濃く設定 */
}
.mute-unmute::before {
content: "\f6a9"; /* Font Awesomeのアイコンを設定 */
font-family: "Font Awesome 5 Free"; /* Font Awesomeを使用 */
font-weight: 900; /* アイコンの太さを設定 */
margin-right: 5px; /* 右側に5pxの余白を設定 */
}
/* ピクチャインピクチャボタンのスタイル */
.pip {
background-color: rgba(108, 117, 125, 0.7); /* グレーの背景色を設定 */
border: 2px solid rgba(108, 117, 125, 0.7); /* グレーの枠線を設定 */
}
.pip:hover {
background-color: rgba(108, 117, 125, 0.9); /* ホバー時の背景色を濃く設定 */
}
.pip::before {
content: "\f2d8"; /* Font Awesomeのアイコンを設定 */
font-family: "Font Awesome 5 Free"; /* Font Awesomeを使用 */
font-weight: 900; /* アイコンの太さを設定 */
margin-right: 5px; /* 右側に5pxの余白を設定 */
}
/* モバイル表示での調整 */
@media (max-width: 600px) {
.control-btn {
margin: 5px; /* モバイルでもマージンを保持 */
}
}
このCSSでは、いくつかのスタイルが組み合わさって要素を周囲から浮かび上がらせる効果を生み出しています。
.JPG)
これらのスタイルが組み合わさることで、ビデオカードが周囲の他の要素から浮かび上がるように見えるという仕組みです。
視覚的に引き立つデザインにするための工夫ですね。
これはそーんなに、重要ではないかもね。
動画ファイルを直接そのまんま貼っても良いのですよ。
ちゃんとコントロールできる仕組みが表示されるから。
でもボタンが小さくてモバイルだと操作しにくい可能性もあるので、こうして別に実装していると言うだけですね。
普通の動画を掲載するvideo.js
document.addEventListener("DOMContentLoaded", function() {
// 全ての動画カード要素を取得
const videoCards = document.querySelectorAll(".video-card");
// 各動画カードごとにループ処理を実行
videoCards.forEach(videoCard => {
// 各動画カード内のvideo要素を取得
const video = videoCard.querySelector("video");
// 再生/一時停止ボタンのクリックイベントを設定
videoCard.querySelector(".play-pause").addEventListener("click", function() {
if (video.paused) {
// 動画が一時停止中なら再生
video.play();
} else {
// 動画が再生中なら一時停止
video.pause();
}
});
// 停止ボタンのクリックイベントを設定
videoCard.querySelector(".stop").addEventListener("click", function() {
// 動画を一時停止して、再生位置を0にリセット
video.pause();
video.currentTime = 0;
});
// ミュート/ミュート解除ボタンのクリックイベントを設定
videoCard.querySelector(".mute-unmute").addEventListener("click", function() {
// 動画のミュート状態をトグル
video.muted = !video.muted;
});
// ピクチャインピクチャボタンのクリックイベントを設定
videoCard.querySelector(".pip").addEventListener("click", async function() {
try {
if (video !== document.pictureInPictureElement) {
// 動画がピクチャインピクチャモードでない場合、ピクチャインピクチャモードを開始
await video.requestPictureInPicture();
} else {
// 動画がピクチャインピクチャモードの場合、ピクチャインピクチャモードを終了
await document.exitPictureInPicture();
}
} catch (error) {
console.error("ピクチャインピクチャモードの切り替えエラー:", error);
}
});
});
});
このコードの説明：
video-cardを持つすべての要素を取得し、videoCardsという変数に格納する。
.JPG)
ループ処理が必要なのは、複数の動画カードがページに存在する可能性があるからです。
各動画カードに同じ操作を適用するために、ループを使って個別に設定しています。
一つだけならループを使わずに直接要素を指定すれば良いのですが、多数の要素に対して同じ処理を行うなら、ループが効率的ってわけですね。
このようにして、複数の動画がページ内にあっても、全部同じように扱えるようになります。
これは役に立つと思いますね。
動画を扱うのは手間がかかり、専用のソフトウェアまで準備しなければならないことがあります。
動画本体をつないだり加工するのはまだ容認するとしても、複数の動画をエンコードするのにいちいち専用ソフトを使っていたら、めちゃくちゃ時間がかかりますよ。
ここでは末尾に動画加工のクラウドサービスも紹介しようと思います。
このPythonコードを実行するために必要なライブラリはsubprocessとffmpegです。
これはPythonの標準ライブラリなんです。
外部プログラムを実行するために使用しますが、追加のインストールは不要です。
動画や音声を処理するためのツール。
コマンドラインツールであり、Pythonから呼び出して使用します。
これをインストールする必要があります。
FFmpegのインストール方法
.JPG)
まず、FFmpegの公式サイトからWindows向けのビルドをダウンロードします。
Get packages & executable filesをクリックします。
Windows EXE Filesのところに
・Windows builds from gyan.dev
・Windows builds by BtbN
とあります。
どちらを選んでもFFmpegをインストールすることはできますが、一般的には「Windows builds from gyan.dev」を使うのがいいかも。
公式ドキュメントでもよく推薦されているし、利用者の評判も安定しています。
まずは「gyan.dev」を試してみて、特別な理由がなければこちらで十分でしょう。
では、「Windows builds from gyan.dev:」をクリックしていただけると、CODEX
FFMPEG に出ます。
CODEX FFMPEGというのは、FFmpegのバイナリ（実行ファイル）を提供しているサイトです。
このサイトは、FFmpegの開発者であるGyan Doshiが運営しており、特にWindows向けのFFmpegバイナリを提供してくれています。
FFmpegに関する教育リソースも提供しており、初心者から上級者まで幅広く利用できるサイトとなっていますね。
次に、「git master builds」のところをご覧ください。
latest git master branch build version: 2024-10-17-git-e1d1ba4cbc とあり、
・ffmpeg-git-essentials.7z .ver .sha256
・ffmpeg-git-full.7z .ver .sha256
こうやって書かれてると思います。
ダウンロードするのはエッセンシャルで良いでしょう。
「ffmpeg-git-essentials.7z」のバージョンはFFmpegの基本的な機能を含んでおり、ほとんどのユーザーにとって十分な内容です。
「ffmpeg-git-full.7z」は追加機能やエクストラコーデックが含まれているので、特別な理由がなければ「essentials」で問題ないと思います。
ダウンロードができたらファイルを解凍し、ffmpegフォルダを適切な場所に配置して解凍する。─ Cドライブ直下など、分かりやすい場所へ。─
それからフォルダパスを環境変数PATHに追加して、どこからでもffmpegコマンドを実行できるようにします。
Windowsキー + Rで「ファイル名を指定して実行」ダイアログを開けますよ。
そこに「systempropertiesadvanced」と入力してEnterキーを押すと、「システムのプロパティ」の詳細設定タブが一発で表示されるんです。
「Windowsキー +」の操作はとても便利で、今回のケースでは直接「環境変数」ボタンにアクセスしています。
.JPG)
これ、重要なんですよ。
今回は動画のエンコードに必要なFFmpegのパスを追加する手順を例にしますが、他でも同じです。
環境変数にパスを追加する手順は、プログラミングやシステム管理の基本的な知識に含まれます。
特に開発者やシステム管理者にとっては、ツールやライブラリを使いやすくするための重要なステップですね。
初めて学ぶには少し複雑に感じるかもしれませんが、慣れてくると非常に有用なスキルになるはずです。
この基本的な操作をしっかりマスターすると、後々の作業がスムーズに進むようになります。
システムのプロパティを開く
環境変数の設定
環境変数の編集
新しいパスを追加
C:\ffmpeg-2024-10-17-git-e1d1ba4cb\bin）を入力して、Enterキーを押す。
設定を保存
これで環境変数にFFmpegのパスが追加されました。
次に、コマンドプロンプトを開いてffmpeg -versionと入力して、正しくインストールされたか確認してみてください。
このコードは、指定された動画ファイルをH.264形式にエンコードして、新しいファイルとして保存するものです。
シンプルだけどとても便利で、Webサイトに動画を掲載するなら、こういったスクリプトを準備しておくと効率が上がります。
動画をエンコードするmp4mini.py
import subprocess # Pythonの標準ライブラリで、外部プログラムの実行に使用するモジュール
def convert_to_h264(input_file, output_file):
try:
# ffmpegコマンドを実行して、動画をH.264形式に変換する
result = subprocess.run(
['ffmpeg', '-i', input_file, '-vcodec', 'libx264', '-crf', '30', '-b:v', '1.5M', '-preset', 'slow', output_file],
check=True, # エラー発生時に例外をスローする
stdout=subprocess.PIPE, # 標準出力を取得する
stderr=subprocess.PIPE # 標準エラー出力を取得する
)
# 変換成功のメッセージを出力
print(f"変換が成功しました: {output_file}")
except subprocess.CalledProcessError as e:
# エラーが発生した場合のエラーメッセージを出力
print(f"変換中にエラーが発生しました: {e.stderr}")
# 変換したい動画ファイルのパス
input_file = r"C:\Users\アレコレ\Downloads\虹動画.mp4"
# 変換後の動画ファイルの保存先
output_file = r"C:\Users\アレコレ\Downloads\output_h264_compressed.mp4"
# 関数を呼び出して、動画を変換する
convert_to_h264(input_file, output_file)
このコードが何をしているか順を追って説明しますね。
まず最初に、subprocessというPythonの標準ライブラリをインポートしています。このライブラリを使うことで、Pythonスクリプトから外部のプログラムを実行することができるんだ。
次に、convert_to_h264という関数を定義しています。この関数は、動画ファイルをH.264形式に変換するために使います。関数には2つの引数があります：
関数の内部で、まずtryブロックを使ってエラーが発生する可能性がある処理を実行します。
subprocess.run関数を使って、ffmpegコマンドを実行します。
このコマンドは、動画をH.264形式に変換するためのものです。
.JPG)
変換が成功した場合、変換後のファイルパスを表示します。
もしエラーが発生した場合、exceptブロックでエラーメッセージをキャッチして表示します。
関数の外部では、変換したい元の動画ファイルのパスと変換後の保存先を指定して、convert_to_h264関数を呼び出します。
これで、指定された動画がH.264形式に変換され、指定した場所に保存されます。
.JPG)
H.264形式、またはAVC（Advanced Video Coding）は、動画の圧縮方式の一つです。
高い圧縮率を持ちながらも、画質を比較的保つことができます。
ストリーミングサービスやYouTubeなど、多くのメディアで使われています。
H.264にしておけば、Webサイトに設置された動画は高品質なままでスムーズに楽しめます。
他にもいろんなビデオコーデックがあって、いくつか代表的なものを紹介しましょうか。
これらはそれぞれ異なる用途や特性を持っていて、使用する環境や目的に応じて使い分けられています。
.JPG)
たとえば、MP4はコンテナで、その中にH.264というコーデックを使って圧縮された動画データが入っていることが多いです。
だから同じMP4ファイルでも、違うコーデックを使っている場合があるんですよね。
私はWindows11を買ってから、デフォルトソフトの Microsoft Clipchamp を使っちゃってるけどね。
悪くないですよ。
基礎的な機能が備わっていて、軽快に動作します。
パソコンにソフトウェアをインストールしたくないなら、次のようなクラウドサービスもあります。
後回しにしたけど、こっちのほうが一般的ではあります。
要するに動画のサムネイル画像も含めて、動画編集ソフトウェアで作り込んでからGoogle Driveにアップロードするのですよ。
それから個人サイトのほうに共有します。
JavaScriptによるコントロールも避けられるし。
まずはhtmlから書いていきますね。
<head>
<!--CSS-->
<link rel="stylesheet" href="../css/video.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!--JavaScript-->
<script src="../script/video.js"></script>
</head>
<!-- Google Drive のカスタムコンテナを定義 -->
<div class="custom-google-drive-container">
<!-- 動画のタイトル -->
<h4>海面で跳ねるウツボの動画（Google Drive）</h4>
<!-- 動画の説明 -->
<p>説明文</p>
<!-- Google Drive からの動画 iframe -->
<iframe src="Google Driveから取得したURL" class="custom-google-drive-iframe" allow="autoplay"></iframe>
<!-- Google Drive のテキスト -->
<p class="google-drive-text"><i class="fab fa-google-drive"></i>This is a video on Google Drive.</p>
</div>
そんなに難しいコードではないです。
CSSも同じ要領で作っていきます。
プレーンな動画ファイルをWebサイトのディレクトリに置く形とは少し違ったデザインにしてみました。
Google Drive動画を掲載するvideo.css
@charset "UTF-8";
/* google-drive */
/* 全体のコンテナスタイルを設定します */
.custom-google-drive-container {
display: block; /* ブロック要素として表示 */
text-align: center; /* 中央揃え */
padding: 20px; /* 内側の余白 */
background: linear-gradient(135deg, #f8f9fa, #e9ecef); /* 背景のグラデーション */
border-radius: 15px; /* 角を丸く */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* コンテナの影 */
}
/* 見出し (h4) スタイル */
.custom-google-drive-container h4 {
margin-top: 10px; /* 上部の余白 */
}
/* 段落 (p) のスタイル */
.custom-google-drive-container p {
text-align: left; /* 左揃え */
margin: 10px 0; /* 上下の余白 */
}
/* Google Drive テキストのスタイル */
.custom-google-drive-container .google-drive-text {
text-align: center; /* 中央揃え */
margin: 10px 0; /* 上下の余白 */
display: flex; /* フレックスボックス */
justify-content: center; /* 中央揃え (水平) */
align-items: center; /* 中央揃え (垂直) */
font-size: 1.2em; /* フォントサイズ */
color: #333; /* 文字色 */
background: #fff; /* 背景色 */
padding: 10px 15px; /* 内側の余白 */
border-radius: 5px; /* 角を丸く */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* テキストボックスの影 */
}
/* iframe のスタイル */
.custom-google-drive-iframe {
width: 80%; /* 幅を全体の80%に設定 */
height: auto; /* 高さを自動調整 */
aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定 */
margin: 10px auto; /* 上下の余白と中央揃え */
border: 5px solid #343a40; /* 枠線の色と幅 */
border-radius: 10px; /* 角を丸く */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* iframeの影 */
}
/* Google Drive アイコンのスタイル */
.custom-google-drive-container .fa-google-drive {
color: #4285f4; /* アイコンの色 */
margin-right: 10px; /* 右側の余白 */
}
こうやって掲載していけば、視聴者の閲覧を妨げる広告を避けつつ、動画を掲載できます。
上述しましたが広告を掲載したいのであれば、Webページの隅にでもリンクを置いておけば良いだけでね。
あるいは、こうやってプレーンな動画ファイルの掲載パターンとGoogle Driveを経由するパターンでCSSによるデザインを分けつつ、いろんなところに掲載していけば、楽しい個人サイトにできるでしょう。
.JPG)
小さな動画のサムネイル画像であれば、上記で紹介してきた通りhtml・CSS・JavaScriptで十分に制御できますよね。
わざわざ動画編集ソフトウェアでチクチクやらなくても良いと思うけど…
でもこういうメディア要素はこだわりも必要ですから。
htmlで表示させるサムネイル画像が表示されています。
ユーザーがタップすると、私が動画編集ソフトで作成したサムネイル画像が表示されつつ、動画が始まります。
サムネイル画像はオトメベラですよ。
元の高画質動画は「撒き餌に群がる小魚」です。
これはこれで悪くないよね。
html・CSS・JavaScriptによる動画制御に合わせて、動画編集ソフトウェアの力も借りる。
短い動画であっても、工夫すれば大きなインパクトを与えられるかもしれません。
まずは動画をお見せしましょう。
実際にはそんな大きな動画ではありません。
小さな魚たちが泳いでいるだけの動画です。
Google Driveから引っ張ってくる場合、html側でサムネイル画像を設定するのは非常にやりにくいです。
JavaScriptでコントロールする必要があり、それでもタップを２回要求するのですよ。
JavaScriptだけでは、Google Driveから引っ張ってきた動画の再生ボタンを叩けないからです。
This is a video on Google Drive.
つまり、大きな動画をサムネイル画像付きで提供したいなら、次の手順を踏むことになるよね。
少し手間がかかりますが、正直これが一番素直な方法でしょう。
html・CSS・JavaScriptだけでは制御しにくいこともあるってことだね。
YouTubeに上げてしまえばサムネイル画像の設定もできるけどさ。
それでもやはり、動画中の広告は避けたいです。
もしくはまだ試していないけど、Microsoftのクラウドを使えばまた別のルートがあるかもしれない。
.JPG)
ちなみにこちらのGoogle Drive動画の場合、JavaScriptは使っていないです。
これが何を意味するかと言うと、動画をコントロールするスクリプトのループ処理まで考えなくて良いということですよね。
一応少しだけ紹介しておこうかな？
私は動画編集をやる習慣はないけど、やるならクラウドで仮想マシンを借りちゃう。
それも他の用事もあるからどーせなら仮想マシンというだけで、マジで動画編集目的なら次のようなツールもあるんです。
こうしたクラウドベースの動画編集ツールを使えば、自宅のパソコンのスペックに関係なく動画編集が可能です。
アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。
個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。
ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。