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

シュウ

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

こんな方に読んでほしい

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

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

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

videの使い方

【jQuery】背景に全画面動画を入れよう、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 コメントアウト
    })