質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Video.js

Video.jsは、オープンソースのHTML5ビデオプレイヤーです。HTMLファイルにてJavaScriptファイル・CSSファイルをロードし、いくつかのタグを書くだけでWebページに動画プレイヤーを設置できます。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

1回答

2790閲覧

iPhone 11でvideoタグのループが止まってしまう。

kotaro_shibata

総合スコア1

Video.js

Video.jsは、オープンソースのHTML5ビデオプレイヤーです。HTMLファイルにてJavaScriptファイル・CSSファイルをロードし、いくつかのタグを書くだけでWebページに動画プレイヤーを設置できます。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2020/07/07 07:07

前提・実現したいこと

Webサイトの動画埋め込みvideoタグで埋め込んだ動画をiPhone 11 でループさせたい。

発生している問題

iPhone 8 と iPhone 11 だけ動画のループがされず一回だけで止まってしまう現象が起きています。
スクロールしたりなどアクションをすると動き出すのだが、何もせずに見ているだけだと一回目で止まってしまいます。

iphone 8 については解決したのですが、iPhone 11に関してだけは不安定で解決していない状態です。
同じような事象が起きた方いらっしゃいますでしょうか?
是非ともご教示お願い致します。

該当のソースコード

<video id="my-video" preload="none" class="video-js" muted loop autoplay webkit-playsinline playsinline data-setup="{}"> <source src="/Video/KeyVisual/kv_comp-sp.m3u8"> <source src="/Video/KeyVisual/kv_comp-sp.webm"> <source src="/KeyVisual/kv_comp-sp.mp4"> <source src="/Video/KeyVisual/kv_comp-sp.ogv"> </video>

試したこと

画像やcss、jsは圧縮、minify化をして極力サイト容量を軽量化する。
①javascritでloopを指定する、動画の終了時にもう一度初めから再生させる等の制御。
②video.jsを使う。
③SPはwebmを優先高くする。
④動画ファイルをCDNのCloudinaryで配信、HLSで配信。

現状は生のjavascriptの制御はやめて②④の状態です。

補足情報(FW/ツールのバージョンなど)

元のファイルはmp4でH.264です。
サーバーはXサーバーの専用サーバーで、CMSはWordPressです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。

動画ファイルやvideoタグ自体には何も問題なかったです。

ファーストビュー時にjsアニメーションで波紋が広がるプラグインを使っていたのですが、そちらの処理が裏でずっと動き続け端末のメモリリークが起きていたようです。
FVが終わるタイミングでストップさせました。
こちら誰かの参考になれば幸いです。

投稿2020/08/11 06:02

kotaro_shibata

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問