「動画一覧」のスマホ動画プレーヤーにコントロールを表示する / JavaScript

動画一覧のスマホ動画プレーヤーの仕様について 

「動画一覧」のページからスマホ動画のサムネイルを選択すると、「個別動画」の画面が開き、動画を再生する事ができます。 この時の「スマホ動画プレーヤー」の仕様ですが、

① サムネイルの左クリックで再生が始まる

➁ 再生開始時は、毎回 音声OFFで再生

➂ 画面のクリックで「再生/停止」を行い、停止時にプレーボタン「 」を表示

④ 通り過ぎた位置へ、動画を巻き戻して再生が出来ない

という仕様です。

アメーバの動画プレーヤーは「iframe」に動画ファイルを呼び出して表示しますが、動画ファイルのリクエスト時のクエリ指定で、以下の動作仕様を選択できます。

キーワード	値	プレーヤーの仕様
autoplay	指定なし	プレーボタン「 」を押して再生開始
	0	プレーボタン「 」を押して再生開始
	1	動画ファイルの呼込んで自動的に再生開始
controls	指定なし	動画コントロールを表示する
	0	動画コントロールを非表示にする
	1	動画コントロールを表示する

「個別動画」のプレーヤーは、「autoplay=1」「controls=0」が指定されていて、先の ①～➂の仕様はその結果です。

この指定は、多数の動画をサムネイルのクリックで、どんどん再生する事を想定したものでしょう。 その際に音声が出る弊害を考え、「 」をクリックするまで音が出ない様にしたと思われます。

これは妥当な仕様ですが、個別動画を詳しくチェックしたい時には、動画のコントロールが必要で。 その仕様に変更するツール「SBVideo Player」を作りました。

「SBVideo Player」の動作仕様 

「SBVideo Player」を「ON」にすると、「個別動画」の動画プレーヤーの仕様は次の様になります。（ブログページに埋込んだスマホ動画とほぼ同じになります）

① サムネイルの左クリックで、動画の開始待機の状態でプレーボタン「 」を表示

➁ 再生開始時は、毎回 音声ONで再生

➂ 画面のクリックで「再生/停止」を行い、停止時にプレーボタンを表示しない

④ シークバーで動画の撒き戻しが可能で、任意の再生位置を指定できる

コントローラーがあると、特定位置を選択でき、「   」ボタンから「再生速度」を調節してスロー再生などが可能になります。

「再生/停止」は画面のクリックやコントローラー左端の「▶/   」ボタンで操作できますが、「スペース」キーでも操作可能です。

 「SBVideo Player」のデザイン

「SBVideo Player」は、アメーバのスマホ動画プレーヤーに以下のデザインのアレンジを行います。 

これは「動画一覧」の動画プレーヤーだけでなく、アメーバブログ全般（他のユーザーのスマホ動画を表示した場合を含む）のスマホ動画プレーヤーに反映します。

ボカシ絵の背景

スマホ動画の周囲の「空き」を埋めるボカシ画像の背景を非表示にします。

◎ブログページに埋め込んだスマホ動画

◎「動画一覧」の「個別動画」でのスマホ動画

 コントローラー部のデザイン

コントローラーの配置を、できるだけ動画に重ならない様に下げています。 また、コントローラーのグラデーションのグレー背景を非表示にしています。

◎ブログページに埋め込んだスマホ動画の例

「SBVideo Player」の機能テスト用サンプル 

「SBVideo Player」の機能をチェックするための、サンプルを作りました。 サンプルはPCモニター画面をスマホで撮影したもので、ファイルはMP4形式です。 スマホの固定フォーカス撮影の仕方を知らなかったので、ウォブリングが出てます。

動画編集のために「Microsoft Clipchamp」（無料版）をインストールしました。

無料で動画編集！Clipchampとは？基本的な使い方

「Adobe Premiere」と似たインターフェイスで、余り迷わずに使えましたが、今回は、必要な箇所の切り出しだけに使用。 適当な箇所を切り出したMP4をスマホに戻し、アメーバアプリで仮投稿に動画を添付しようとしたら、「添付動画は 60sec以内」という注意書きが出て、自動で再切り出しをしてくれました。 なんだ、動画編集アプリは要らんかったのかと、少し思ったしだい。

◎ ブログ記事中のスマホ動画の表示サンプルです。

◎ この動画の「動画一覧 / 個別動画」のページは、以下です。

「動画一覧 / 個別動画」のスマホ動画サンプル　

「SBVideo Player」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 SBVideo Player 〕 ver. 0.1

// ==UserScript==
// @name         SBVideo Player
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  スマホ動画一覧ページで動画コントローラーを表示
// @author       Ameba Blog User
// @match        https://ameblo.jp/*/video*
// @match        https://static.blog-video.jp/*
// @run-at      document-start
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant        none
// ==/UserScript==


let target=document.body;
let monitor=new MutationObserver(main);
monitor.observe(target, {childList: true, subtree: true});


function main(){
    let iframe_sv=document.querySelector('iframe[src*="static.blog-video.jp"]');
    if(iframe_sv){
        let sv_src=iframe_sv.getAttribute('src');
        if(sv_src.includes('&controls=0')){
            sv_src=sv_src.replace('&controls=0', '&controls=1');
            sv_src=sv_src.replace('&autoplay=1', '&autoplay=0');
            iframe_sv.setAttribute('src', sv_src); }
    }}



if(location.hostname.includes('static.blog-video.jp')){
    let retry=0;
    let interval=setInterval(wait_target, 1);
    function wait_target(){
        retry++;
        if(retry>100){ // リトライ制限 100回 0.1secまで
            clearInterval(interval); }
        let target=document.documentElement; // 監視 target
        if(target){
            clearInterval(interval);
            environ(target); }}

    function environ(target){
        let style=
            '<style class="sbvp">'+
            '.video-bg { display: none; } '+
            'video::-webkit-media-controls-panel { '+
            'background: none !important; margin-bottom: -20px; } '+
            '#js-video-touch-area.hide { display: block !important; '+
            'height: calc(100% - 60px); outline: none; }'+
            '</style>';

        if(!document.querySelector('.sbvp')){
            target.insertAdjacentHTML('beforeend', style); }}

}

「SBVideo Player」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「SBVideo Player」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）