スマホでも動画再生させる方法。

2023.10.16

Logging

おはよう御座います、スマホでも動画再生させる方法を記載しますね。このコードをvideoタグに入れるとスマホでも動画が再生されるようです。iPhoneのSafariとchromeで動作確認済。最新のブラウザではスマホでも動画再生されるようです。

<video autoplay preload="none" loop="loop" muted="muted" playsinline=""

上記のコードで大事になるのが「playsinline」という所、この記述がなければスマホでは動画が再生されません。ググってもなかなかこのコードにたどり着くことが出来なかった。昔はスマホで動画が再生され無かったのですが、いまの最新のブラウザではスマホでも動画が再生出来るようになっているので、これは良い感じだなぁと思います。なお、ミュートとかオートプレイも大事だということも付け加えて置きます👍。

因みに一昔前だとサーバーサイドでストリーミング再生でとかしていたと思いますが、この手法が使えるようになってからは、かなり低予算で対応出来るようになったのではないかなって個人的には思いました。

明日へ続く😌

タグ

Chrome, iPhone, loop, lt;video autoplay preload, muted, muted&quot, none&quot, playsinline, quot, quot;loop&quot, Safari, videoタグ, オートプレイ, サーバーサイド, ストリーミング再生, ブラウザ, ミュート, 一昔前, 手法, 記述,

404の画像をno-imageにする#jscode

2023.05.16

Logging

おはようございます、404の画像をno-imageにするコードです。案外簡単なコードですが、これでノーイメージに変換できます。因みに参照した404ページが404のステータスを吐き出していなかったら、このJSコードは機能しません。

if(document.querySelectorAll("img")){
     [...document.querySelectorAll("img")].forEach(elm=>{
        fetch(elm.src).then(response=>{
            if(!response.ok){
                elm.src = "no_image1.gif";
            }
        });
     });
}

因みに自分のブログサイトもこんな感じのコードを埋め込んでいます。これをphp言語で対応すると処理がサーバーサイドになるので重たくなります。こういうのはJSコードで対応するのが個人的には良いと思っています。尚、JSコードとPHPを連動させて表示の有無を行うのも良いかも知れません。

画像URLを参照してレスポンスデータが返ってきます、このレスポンスの変数をconsole.log(response);で表示するとstatusなども返ってきていることが分かると思います。404ステータスだけ何かしたい場合はresponse.statusで判断するともっと厳密になって良いかも知れません。

タグ

'src', console.log, document.querySelectorAll, elm, fetch, foreach, gt, if, img&quot, no-image, quot, response, response.ok, response.status, status, then, サーバーサイド, ブログサイト, レスポンス, 変数,