FROM CACHE - jp_header

動画を背景再生(自動再生)させたい【Narrative】

Ryo1
訪問者
2 0 0

無料テーマ「Narrative」で動画を背景再生(自動再生)させたいです。

どなたかご教授いただけたら幸いです。

5件の返信5

junichiokamura
Community Manager
1200 280 506

通常は、テーマ>カスタマイズのエディタで、ビデオのセクションの設定に、再生ボタンを表示するか、自動再生させるかがあるのですが、いかがでしょうか?

Senior Partner Solutions Engineer
Ryo1
訪問者
2 0 0

ご返答いただきありがとうございます。

【Narrative】テーマは再生ボタンを表示する・自動再生させるができない仕様でして...

その場合、コード編集などしてどのように自動再生させるかを教えいただけますでしょうか?

 

junichiokamura
Community Manager
1200 280 506

動画再生の部分は、コードが複雑なので、自動再生ありのテーマを選ばれた方が賢明かと思いますが、コードの中身をみてみると、assets/theme.js の7609行あたりで、JavaScriptで再生のコントロールをしているように見えますので、このあたりがヒントになる気がします。(コードの調査に少し時間がかかりそうなので、最終的な解ではないですが、ビデオの再生は、sections/video.liquidで実装されているので、そこで利用されているclass名や、属性名からテーマのコード全体を検索して(テーマをダウンロードするとやりやすいです)、使われているCSS(sass.liquid)やJavaScriptを分析することになります。)

_promiseVideo: function() {
    var playerType = this.$video.attr('data-video-type');
    var promiseVideoPlayer;

    if (playerType === 'youtube') {
      promiseVideoPlayer = this._loadYoutubePlayer();
      this.$video.attr('tabindex', '-1');
    } else if (playerType === 'vimeo') {
      promiseVideoPlayer = this._loadVimeoPlayer();
      this.$video.find('iframe').attr('tabindex', '-1');
    }

    return promiseVideoPlayer;
  },

  _loadYoutubePlayer: function() {
    var blockId = this.$video.attr('data-block-id');
    var videoId = this.$video.attr('data-video-id');

    return youtube
      .promisePlayer(this.$video[0], {
        videoId: videoId,
        ratio: 16 / 9,
        playerVars: {
          // eslint-disable-next-line camelcase
          iv_load_policy: 3,
          modestbranding: 1,
          autoplay: 0,
          controls: 0,
          showinfo: 0,
          wmode: 'opaque',
          branding: 0,
          autohide: 0,
          rel: 0
        },
        events: {
          onStateChange: function(evt) {
            // Video has ended, loop back to beginning
            if (evt.data === 0) {
              this.players[blockId].seekTo(0);
            }
          }.bind(this)
        }
      })
      .then(
        function(player) {
          this.players[blockId] = player;
          player.playVideo().mute();
          // The video will not play if the iframe is set to visibility: hidden
          // Need to set it seperately from other styles in order to resolve the promise
          $(player.a).css('visibility', 'visible');
          // set player to visible
          return $.Deferred(function(defer) {
            player.addEventListener('onStateChange', function(evt) {
              // Only resolve the promise if the video is playing
              if (evt.data === 1) {
                defer.resolve();
              }
            });
          });
        }.bind(this)
      );
  },

  _loadVimeoPlayer: function() {
    var blockId = this.$video.attr('data-block-id');
    var videoId = this.$video.attr('data-video-id');

    return vimeo
      .promisePlayer(this.$video[0], {
        id: videoId,
        loop: true,
        // This property isn't reliable. The user might see the Vimeo playbar flash
        // as the video begins to play.
        playbar: false,
        background: true
      })
      .then(
        function(player) {
          this.players[blockId] = player;
          player.play();
          player.setVolume(0);

          return $.Deferred(function(defer) {
            player.on('loaded', function() {
              defer.resolve();
            });
          });
        }.bind(this)
      );
  },

 

Senior Partner Solutions Engineer
junichiokamura
Community Manager
1200 280 506

なおNarrativeは、以下のブログでも紹介されているように表示パフォーマンスの高速化を測っているので、表示速度を落とす自動再生は意図的に対応していない可能性があります。

https://www.shopify.jp/blog/partner-shopify-theme-team-fast-narrative-improve

 

Senior Partner Solutions Engineer
Norisukebom327
訪問者
1 0 1

自分もおなじことを検討していて、カスタムHTMLに下記のコードを埋め込めばできそうな気がしてます。
(まだ実装してみてはいませんが)

HTML5で動画を再生する方法 - Mobile First Marketing Labo (aiship.jp)