SHU BLOG

BLOG NEWS ブログ

TITLE

【jQuery】Vide、動画が再生されない場合の対応について!!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【jQuery】Vide、動画が再生されない場合の対応について!!の解説になります!

こんな方に読んでほしい

  • jQueryを学び始めた方へ
  • Safari、スマホやPCで動画が再生されない問題を解決したい方へ
  • 今回はVideについて解説しております。

今回は、前回に続きVideについての解説になります。
前回は、videの使い方について解説しました。

今回は、Safari、スマホやPCで動画が再生されない問題について解説していきます。
下記の記事では、videの使い方から、設定の流れ、ダウンロード方法について解説しております。

videの使い方

videの使い方から、設定の流れ、ダウンロード方法について解説しております。

ブラウザによって動画が再生されない問題について

ブラウザによって動画が再生されない問題について

GoogleChromでは、問題なく「背景に動画は流れます」ですが、Safariでは「再生されず静止画」になる問題が発生します。
解決策としては、前回で解説した、使用ファイル「jquery.vide.js」のコードを触ることで解決できました。
jquery.vide.jsファイルの334行目付近の// Video alignmentを探してください。

    // Video alignment
    $video.css({
      margin: 'auto',
      position: 'absolute',
      'z-index': -1,
      top: position.y,
      left: position.x,
      '-webkit-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      '-ms-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      '-moz-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      transform: 'translate(-' + position.x + ', -' + position.y + ')',

      // Disable visibility, while loading
      visibility: 'hidden',
      opacity: 0
    })

上記のコードで重要な部分は、14、15行目のvisibility:hiddenと、opacity: 0 コメントアウトしてくさだい。
下記のようなコードになります。

    // Video alignment
    $video.css({
      margin: 'auto',
      position: 'absolute',
      'z-index': -1,
      top: position.y,
      left: position.x,
      '-webkit-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      '-ms-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      '-moz-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      transform: 'translate(-' + position.x + ', -' + position.y + ')',

      // Disable visibility, while loading
      // visibility: 'hidden', コメントアウト
      // opacity: 0 コメントアウト
    })

Safariでも、問題なく動画が表示されます。

まとめ

今回はこれで以上です。

POINT
  • Videとは、「背景に動画」を指定し再生してくれます。
  • jquery.vide.jsファイルの334行目付近の// Video alignmentを探してください。
  • visibility:hiddenと、opacity: 0 をコメントアウトしてください。
  • 前回のVideの使い方について解説しております。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top