Liquid、JavaScriptなどに関する質問
無料テーマ「Narrative」で動画を背景再生(自動再生)させたいです。
どなたかご教授いただけたら幸いです。
通常は、テーマ>カスタマイズのエディタで、ビデオのセクションの設定に、再生ボタンを表示するか、自動再生させるかがあるのですが、いかがでしょうか?
ご返答いただきありがとうございます。
【Narrative】テーマは再生ボタンを表示する・自動再生させるができない仕様でして...
その場合、コード編集などしてどのように自動再生させるかを教えいただけますでしょうか?
動画再生の部分は、コードが複雑なので、自動再生ありのテーマを選ばれた方が賢明かと思いますが、コードの中身をみてみると、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)
);
},
なおNarrativeは、以下のブログでも紹介されているように表示パフォーマンスの高速化を測っているので、表示速度を落とす自動再生は意図的に対応していない可能性があります。
https://www.shopify.jp/blog/partner-shopify-theme-team-fast-narrative-improve
自分もおなじことを検討していて、カスタムHTMLに下記のコードを埋め込めばできそうな気がしてます。
(まだ実装してみてはいませんが)
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024