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

2023.10.16

Logging

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

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

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

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

明日へ続く😌

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

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

webpに対応しましたプラグインでカバーしました。 Safariめ!!

2020.01.25

Logging

WebP Express(ウェッピーエクスプレス)というWordPressのプラグインがあるので、そちらでコンバート(変換)すれば良いのですが、大量に画像があるサイトはそれで変換できないので下記の対応方法で対応をお願いします。

1. WebP Express使用してコンバートする際に webpが生成されます。webpの生成場所を確認する。現在は下記の配下にwebp画像が作られています。

/wp-content/webp-express/webp-images/doc-root/wp-content/uploads

2.1の配下にwebpの画像を生成するために下記のコマンドを実行します。自分の場合、アップロードしている画像をリスト化して一括処理するプログラミングを実行しました。尚、cwebpがインストールされていない場合、インストールする必要があります。さくらレンタルサーバーには入っているみたいです。

cwebp -q 90 元画像名(階層を含む).png.webp -o 変換後のファイル名.webp (変換先の階層を含む)

こうすることで画像は全てwebpに変換することが可能ですが、これだけでは表示が切り替わらないので下記の画像を参照しプラグインの設定を変更してください。

ちなみにこのwebp(ウェッピー)はグーグルさんが開発したものらしいです、大体のブラウザが、こちらの webpに対応しているのですがSafariとIEは非推奨みたいなんですよね。何れwebpに対応すると思います…思いたい。

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

, 2.1, cwebp, doc-root, Express, Safari, uploads, webp, webp-express, webp-images, WordPress, wp-content, アップロード, インストール, ウェッピーエクスプレス, お願い, カバー, コマンド, コンバート, サーバー, サイト, さくら, そちら, それ, ため, プラグイン, プログラミング, リスト, レンタル, 一括, 下記, 使用, 処理, 場合, 場所, 変換, 大量, 実行, 対応, 必要, 方法, 現在, 生成, 画像, 確認, 自分, 配下, ,

#速報基本情報技術者の解答ができる生成ツール。(´Д`)カム

2015.04.19

Logging


今日は基本情報技術者の試験日なのですが、ここ一ヶ月、勉強という勉強をしていなかったのでおそらく試験を受けに行きません(ここ一ヶ月、何もなければ試験に足を運んでいたのですが・・・・)。今回は試験はパスします。おそらく10月の試験に合格してそうな気がします。その前に仕事が内定することが大事なのです。その事をここ一ヶ月ちからを入れてましたので勉強してなかったので今回は見送りです。それに野暮用もありますので試験を受ける確率は少なかったです。ちなみに5時頃から起きて行くか行かないか悩んでた事は確かです。悩みながら作ったのはTwitterで基本情報解答スレができるしょぼいWebサービスものです。自分が試験を受けにいった時にスマホで解答を速報しようかなと思ってたのでこういう物をつくりました。スマホとPCだけ対応してます、ガラケには非対応です。
アドレスはこちらから。?https://zip358.com/tool/kihon/?ご自由にお使いください。
アドレスをコピペしてスマホブラウザで開いてください。
皆さんの健闘を祈ってます。
※動作環境はiPhoneのSafariから確認済み。おそらくAndroidでも動作するはずです。
 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

Android, Safari, Twitter, アドレス, カム, ガラケ, しょぼいWebサービス, スマホブラウザ, 一ヶ月ちから, 健闘, 勉強, 動作環境, 基本情報解答スレ, 生成ツール, 皆さん, 確率, 確認済み, 試験日, 速報基本情報技術者, 野暮用,