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

Highlighted
新規メンバー
2 0 0

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

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

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
737 157 248

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

Technical Partner Manager, Japan
0 件の「いいね!」
Highlighted
新規メンバー
2 0 0

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

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

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

 

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
737 157 248

動画再生の部分は、コードが複雑なので、自動再生ありのテーマを選ばれた方が賢明かと思いますが、コードの中身をみてみると、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)
      );
  },

 

Technical Partner Manager, Japan
0 件の「いいね!」
Highlighted
Community Manager
Community Manager
737 157 248

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

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

 

Technical Partner Manager, Japan
0 件の「いいね!」