TOP動画のフリーズを改善したい。

0
いいねをした人: 居ません
13件の投稿を表示中 - 1 - 13件目 (全13件中)
  • 投稿者
    投稿
  • #96475
    よっぴー
    閲覧者
    7

    【お使いの Snow Monkey のバージョン】15.15.0
    【お使いの Snow Monkey Blocks のバージョン】13.2.1
    【お使いの Snow Monkey Editor のバージョン】 6.2.1
    【お使いのブラウザ】chrome,IE,Safari
    【当該サイトのURL】http://xs157698.xsrv.jp/demosite/

    ### 実現したいこと
    スマホで見た時に、TOPページのTOP動画がページ遷移したらフリーズしてしまいます。こちらカスタマイズ等で改善可能でしょうか。

    ### 発生している問題
    TOP→製品詳細→戻るボタン→TOP動画フリーズ
    上記のようにフリーズが発生しております。

    ### 試したこと
    通信環境など整え、動画サイズもサイズダウン、CSS記述も全て削除して動作確認しました。
    私の方では問題ないのですが、先方様のスマホではフリーズしているようでして、通信環境などが原因か、システム的なトラブルがあるのか。。

     

    お忙しいところ恐れ入りますが、何卒宜しくお願い申し上げます。

    0
    いいねをした人: 居ません
    #96476
    Olein_jp
    参加者
    561

    こちら Mac の Google Chrome、iPhone Google Chrome で確認しましたが、上記のように画面遷移を行なっても動画は自動再生されます。

    【お使いのブラウザ】chrome,IE,Safari

    とありますが、これらの Windows のブラウザで動作を確認された結果、上記の動作が上手くいかない結果になったということでしょうか?

    私の方では問題ないのですが、先方様のスマホではフリーズしているようでして、通信環境などが原因か、システム的なトラブルがあるのか。。

    こちらでは吉田さん以上にお客様の状況が分からないので判断できませんが、まずは吉田さんがお客様と同じ環境を再現して原因を突き止めてみるしか、この情報量ではなんとも言い難いところですね…。

    1
    いいねをした人:
    #96500
    アバター画像キタジマ タカシ
    参加者
    2371

    僕の手持ちの Android 12 + Chrome でも現象確認できませんでした。

    「フリーズ」とありますが、これは本当にフリーズなのか、単に動画がスタートされないのかが気になりました。動画がスタートされないということであれば、スマホだとキャッシュがきいてうまくいかないとか、スマホ特有のなにかでそういうことがあってもおかしくないかもなと思ったりしました(解決方法はわからないですが…)。

    0
    いいねをした人: 居ません
    #96564
    よっぴー
    閲覧者
    7

    ご連絡ありがとうございます。

    先方様はサファリを使用との事でございます。
    キャッシュのクリアなどをしても、Safariで閲覧している5人中3人は途中でビデオが停止してしまうとご報告いただきました。(おそらく先方会社内のWi-Fiが我々より遅いのかと思います)

    ただ、https://lexus.jp/ ←レクサスHPの場合は、全員ビデオが表示されサクサク見れたるようです。

     

    iphone7 の人は見ることすら出来なかったみたいなのですが、思い当たるものとしては先方様のご希望で画像自体に高画質処理をしております。またサイズダウンもしてはいけないという指示のため、その影響からスマホ端末の処理速度やWi-Fi環境によっては不具合が発生しているのかと考えております。

     

    例えばですが、全ページの画像を全てサイズダウンさせる必要がございますでしょうか。もしくは、他の方法で解決できるのでしょうか。
    (追加CSSに記述の内容は、新しくmySnowMonkeyに記載し外部CSS化するようにいたします。

    0
    いいねをした人: 居ません
    #96565
    よっぴー
    閲覧者
    7

    見れる人:iphone 13 . iphone12
    見れない人:iphone 10 . iphone8. iphone7 . ipad

    0
    いいねをした人: 居ません
    #96570
    GONSY
    参加者
    836

    まず、ファイルサイズの大きなmp4の動画を直接再生させていることが原因ではないでしょうか。

    ▼展示場PC版高画質.mp4
    1920×1080
    1分51秒
    39.9 MB

    一方、レスサスの動画は以下のような状況です。
    ▼kv-220112.mp4
    1360×760
    15秒
    3 MB

    通常のコーポレートサイトでストリーミングサーバーは使わないと思いますので、どうしても高画質で環境に左右されにくくするのであれば、いったんYouTubeなどにアップし、そちらをエンベッドさせたほうがいいと思います。
    mp4なら、LEXUSのようにテレビCMくらいの長さにしてサイズや画質を調整するなどして、極力軽くすることをおすすめします。(10MB以下が望ましい?)
    お見せしたいクライアントのお気持ちも十分わかりますが、トップページの1分51秒の動画を最初から最後まで見てくれるユーザーは多くないのでは?と思います。
    それよりも、動画が何も表示されず、真っ黒もしくは真っ白なファーストビューを見せるほうが損失が大きいのではないでしょうか。

    改善として、トップページの動画は短く、それ以上は別ページで観ていただくようにするなど、どこか妥協点を探られたほうがいいと感じました。(似たような経験があります)

    横から失礼しました(^^

    2
    いいねをした人:
    #96629
    よっぴー
    閲覧者
    7

    GONSY様ありがとうございます!

     

    スマホではTOP動画は3mbに変更して見ました。(一旦画質の荒い動画を設置し確認するため)

    サイズダウンはさせているのですが、先方様のiPhone Xと最新のipadでは動画が止まってしまうようです。

     

    YouTubeなどにアップし、そちらを埋め込むと表示速度が良くはなるかと思いますが、YouTube特有の左右上下にあるマークや表示などは残りますでしょうか。(動画がまっさらになればユーチューブでもOKが出ると思いますが、グーグルで調べても出てきませんでした(>_<))

     

    それとも全ページの画像をサイズダウンする他ないでしょうか。

     

    お忙しいところ恐れ入りますが、何卒宜しくお願い申し上げます。m(_ _)m

    0
    いいねをした人: 居ません
    #96631
    アバター画像キタジマ タカシ
    参加者
    2371

    キャッシュのクリアなどをしても、Safariで閲覧している5人中3人は途中でビデオが停止してしまうとご報告いただきました。

    「停止」というのは、ローディング中になるということですかね? 待っていればまた再生が開始されるのであれば、やはり回線や動画の容量の可能性が高いと思います。キャッシュのクリアもしたとのことですが、まれに履歴だけ消してキャッシュをクリアせずに確認される方もいらっしゃいますので、シークレットウィンドウで確認してもらうのが確実だと思います。

    YouTubeなどにアップし、そちらを埋め込むと表示速度が良くはなるかと思いますが、YouTube特有の左右上下にあるマークや表示などは残りますでしょうか。

    パラメーターで消せる部分もありますが、ホバーしたりすると表示されたと思うので、完全に消したいのであればやはり自サーバーに置くしかないと思います。

    ちなみにレクサスのサイトの動画を僕も確認してみたのですが、

    拡張子が webm でサイズが 305B となっていたので、これはストリーミング再生されているということなんですかねー(動画まわりは全然詳しくなく…)。もしそうだったとしたら安定的に再生されるのはそういう方法を使っているからというのはあるかもしれませんね。

    0
    いいねをした人: 居ません
    #96633
    Olein_jp
    参加者
    561

    GONSYさんではないですが失礼します…。

    まずは動画容量を下げられたとのことですが、動画の画像品質や容量については別途最適化されて書き出しをされる他、対応方法はないかと思います。

    また、お客様の方ではまだ動画がスムーズに再生されないということですが、そういった現象が発生するリスクを直に体験できている良い機会だと思います。

    言い換えると、現状だとそのようにストレスなく再生されないWebサイトの状況である、ということをご理解いただけるかと思います。また、さまざまな通信環境やデバイス環境にてアクセスされる可能性があるというのがWebサイトですので、許容するボーダーラインみたいなものをプロジェクト内で定める必要があるでしょう。

    その上で「やはり誰にでもストレスなく情報を届けたい」ということであれば、動画の掲載も含めて再検討する必要があるでしょうし、それでもやはり「動画を載せたい」ということであれば、今起きているようにWebサイトにアクセスをされて再生されない人や見れない人などが存在してもやむを得ないと考えるしかないでしょう。

    YouTubeなどにアップし、そちらを埋め込むと表示速度が良くはなるかと思いますが、YouTube特有の左右上下にあるマークや表示などは残りますでしょうか。(動画がまっさらになればユーチューブでもOKが出ると思いますが、グーグルで調べても出てきませんでした(>_<))

    こちらはご自身で実際に試されると良いと思います。それが一番早いでしょう。Snow Monkey Blocksのセクションブロックの背景にYoutube動画を設定することもできますが、別途独自に読み込むことも技術的には可能です。そういった方法を用いる場合にだけ利用できる設定などもあると思います。

    ぜひ挑戦してみてください。

    2
    いいねをした人:
    #96642
    よっぴー
    閲覧者
    7

    お二方ともご丁寧にありがとうございます。

    検討の結果、

    「セクション(背景 YouTube 動画)」を使用す流のが一番早く、youtubeのマーク等もくなっていたので設置して見ました。

    (TOP動画のすぐ下に背景動画設置しております)

     

    ただ、背景動画が静止画のようになっているため困ってます。パラメータをURLの末尾に加えて見ましたが変化がなかったです。(URL末尾に、?autoplay=1?mute=1 を加えれば自動再生できるみたいですが、、だめでした)

     

    「セクション(背景 YouTube 動画)」では動画は自動再生されないのでしょうか。(すみません教えてください、タイトルとは少し違う質問ですが新たにスレッドを立てた方が良いでしょうか

    0
    いいねをした人: 居ません
    #96644
    アバター画像キタジマ タカシ
    参加者
    2371

    あ、「セクション(背景 YouTube 動画)」ブロックはスマホは動画ではなく画像になる仕様です!

    0
    いいねをした人: 居ません
    #96795
    よっぴー
    閲覧者
    7

    北島さん、ゴンシーさん、オレインさん有難うございます。

    今回の件ですが、サファリで起こる動画の停止現象の原因が掴めました。

    動画を1mbにサイズダウンしても停止状態となり改善しなかったため色々と調べていたところわかりました。

    0
    いいねをした人: 居ません
    #96797
    よっぴー
    閲覧者
    7

    「原因」
    サファリの場合、「戻るボタン」を押した際にこの停止現象が発生しておりました。(ロゴクリックでTOPに戻る場合は再生されていた)

    Safariデフォルトで自動再生されないのは、通信容量的な問題からそちらの方が都合がよいと判断され停止されていたようです。(おそらく仕様?)

    「解決策」

    下記スクリプトコードを、MySnowMonkeyに追加することで「戻るボタン」クリックで強制的にリロードさせる→動画自動再生する

    2
    いいねをした人:
13件の投稿を表示中 - 1 - 13件目 (全13件中)
  • トピック「TOP動画のフリーズを改善したい。」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。