【日常】Youtube動画と連動したブログカスタマイズは一旦終結とデモ公開するよって話
お久しぶりの投稿でございます
権兵衛でございます。
2019年12月19日にYoutube動画を投稿しようとふと思いつく。
そこから、すぐさま前準備として行動に移したYoutube動画と連動させたブログ作りのためのカスタマイズは公開することのできるレベルまでに完成したとは思うのでテストブログから当ブログにカスタマイズをしました。
カスタマイズが終わっただけで動画の方は何も手を付けていないので、これから動画制作の勉強をしつつ、気になる細かい修正などをちょくちょくしていこうと思っています。
ブログのカスタマイズは、私が思っていたよりも難しい事ばかりで悪戦苦闘。
まだ完璧に完成した訳ではないものの、エラーによる処理落ちや理想の動きをしないなどの問題点は解決したので、これにて一旦閉幕にするつもりです。
しかしながら、私のパソコンやスマホ、タブレットの環境下においてエラーがなかったり、理想の動きをするだけで、他の人の環境下においては別の形になるうるかもしれません。
なので、もし気になる点がございましたら遠慮なくどんどんとコメントなりで教えて欲しいです。
こんな処理が欲しい、この処理はいらない、見にくい、ボタンの意味が分かりにくい、操作が分かりづらいなどなど何でも良いので使用した感想が欲しいと思いますので、
何でも良いです
どんな事でも良いです
いつでも構いません
感想をお願いします！！！
Youtube動画×ブログ
Youtube動画と連動させたブログカスタマイズも一度完成として、次の段階である動画制作に入ろうと思います。
とりあえず、他のYoutuberさんの動画を用いてになりますが、どんなカスタマイズ結果になったのかを説明していきたいと思います。
Yotube動画と連動させた記事のデモンストレーション
デモンストレーションとして、カスタマイズした事を適用させた記事を制作しました。
以前に記事作成したものをリライトしてます。
▼カスタマイズを適用させた記事はコチラ▼
是非ともアクセスしてどんなものが出来たのか見てみてください。
横で動画を再生しつつ、テキストを読み進めることができます。
動画内容とテキスト内容を交互に観ながら解説内容を読み進めることが出来るのは中々便利じゃないかなぁと思います。
知りたい情報にすぐにアクセスできることに重きを置いてますので、ブログの項目冒頭には項目に該当する動画の再生位置箇所までスキップできるボタンを設置しています。
これで、気になる項目があれば該当の再生箇所までスキップできて、すぐさまテキスト内容と動画を交互に見比べながら勉強することが可能になります。
自分が見えやすい位置に動画を移動させることも可能です。
色々と機能を付けていますので簡単に説明したいと思います。
操作方法の説明
別枠で用意された動画ウィンドウにはボタンを設置しています。
ここでは、ボタンの説明をしていきます。
ボタンの種類は全部で12種類です。
スマホの場合は、9番の10秒前に戻るボタン、10番の拡大縮小ボタン、11番の10秒先に進むボタンを除いた9種類を用意しています。
- 音声のON・OFF
- 3番の動画ウィンドウを移動させた際に有効となります。パソコン・タブレットは右下。スマホは上が定位置となっていて、動画ウィンドウを動かした際に指定している定位置に戻すことができます。
- 動画ウィンドウの移動。ボタンを押している間は好きな位置に移動できるようにしています。
- 動画ウィンドウを閉じます。ボタンを押した際は元々あった埋め込み位置に戻ります。また動画ウィンドウを表示させたい場合は埋め込み位置まで戻る必要があります。
- 再生速度の調整でボタンを押すたびに「0.75倍」「0.5倍」「0.25倍」の順で遅くすることができます。速くしていた場合は「0.25倍」ずつ遅くすることができます。
- 再生と停止をすることができます。
- 再生速度の調整でボタンを押すたびに「1.25倍」「1.5倍」「1.75倍」「2.0倍」の順で速くすることができます。遅くしていた場合は「0.25倍」ずつ速くすることができます。
- ブログの項目冒頭に動画の該当部分に当たる再生位置ボタンを複数個設置しています。現在の再生位置から一つ前の再生位置まで戻すことができます。
- 現在の再生位置から10秒前に戻ることができます。スマホにはありません。
- 動画を大きくしたり小さくしたりできます。現在は、「幅400px・高さ225px」の小サイズ。「幅560px・高さ315px」の大サイズの2種類のみです。スマホでは拡大・縮小ボタンは用意しておらずにスクリーンの幅に併せて表示させる様にしています。全画面表示させるには動画のフレーム内にあるYoutubeが用意している「全画面」アイコンをクリックorタップする必要性があります。
- 現在の再生位置から10秒先に進めることができます。スマホにはありません。
- ブログの項目冒頭に動画の該当部分に当たる再生位置ボタンを複数個設置しています。現在の再生位置から一つ先の再生位置まで進めることができます。
パソコン、タブレット、スマホで表示のさせ方に変更を加えていますが、スクリーンの幅で変更する様に設定しています。
パソコンで見る場合でも表示させているブラウザのスクリーン幅が小さいとそれに併せた表示になります。
動画のフレーム内にあるYooutubeが用意している機能は通常通りに処理されます。
ボタンを押さずとも、再生や停止、全画面表示、再生バーの移動などは、これまで通りの操作で動かす事が出来ますので、ボタンは補助的な意味合いと思ってください。
気になるところは後から少しづつ修正予定
技術面、デザイン面で色々と気になるところがありますが後々に修正していく予定です。
例えば、再生・停止ボタンです。
再生ボタンを押すと、動画が再生されて、ボタンは停止ボタンのアイコンに変わります。
しかし、ボタンを押さずして動画のフレーム内から再生を押すと、私が用意したボタンのアイコンは変わらずして再生ボタンのままです。
そして、ボタンから停止するには、一度再生ボタンを押して、停止ボタンの表示に切り替わってから停止ボタンを押す。と言うように2回ボタンを押さなければなりません。
重大なエラーではないものの、気になる点は多いので他の活動をしながら平行して少しづつ修正していこうと思います。
ゆっくりとやっていく予定
これから動画制作を始めようと思いますが、ゆっくりとやっていこうと思います。
今までにやってきた一日の終わりに書く日常系の記事が作成できるぐらいの余力を残しつつ動画制作に励もうと思います。
1月の中旬にはブログカスタマイズと動画公開を予定していましたが、これまた延期となります。
2月中に動画を公開できる様にしようと思いますが、若干怪しい雰囲気が漂います。
とりあえず、しばらく様子見をしてみて厳しいなと思いましたら、ブログの表示速度向上に関する記事だけでも先に作成して投稿しようかなと思います。
それから、他のブロガー方々の交流もまた初めて行こうと思います。
またまた宜しくお願いします。
そして遅れましたが明けましておめでどうございます！笑
