▲やりたいこと
-vue.jsを使用して、youtubeを埋め込み自作サムネをタップしたらサムネが外れてyoutubeが自動再生するようにしたい。
youtube-embedを入れて実装しpcではサムネタップ後自動再生しましたが、spだとなりません。
▲ご教示いただきたいこと
-youtube-embedでスマホもpc同様にサムネタップ後自動再生する方法を教えていただきたいです。
-下記のエラーが出ているのですが、関数の呼び出し方法をご教示いただきたいです。
下記にコードを添付いたします。
発生している問題・エラーメッセージ
`Uncaught ReferenceError: youtubeMovie is not defined at VueComponent.playMovie`
とでて関数がうまく呼び出せません。
ちなみに呼び出し元で定義している関数名がyoutubeMovie
また、vue.jsを編集・更新してもソースconsoleからsourceを見ると更新されません。
該当のソースコード
youtubePlay.js
export const youtubeMovie = function (el, option = {}, auto) { playerOption = option youtubeArea = el isAutoPlay = auto if (flag === 1) { onYouTubeIframeAPIReady(); } else { playerOption = option youtubeArea = el isAutoPlay = auto flag += 1 } const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); };
呼び出し先
import { youtubeMovie } from "@/utils/youtubePlay"; methods: { playMovie(storyNum) { this.currentSelectMovie = storyNum; this.videoId = currentWeek.youtube; this.isShowThum = false; const option = { videoId: this.videoId, playerVars: { html5: 1, loop: 1, showinfo: 0, controls: 1, showinfo: 1, rel: 0, playsinline: 1 } }; console.log(option, "option"); youtubeMovie(this.elm, option, true); } },
試したこと
youtube-embedではなくyoutubeAPIをjsで書いてveuのコンポーネント内のmethodsにその関数を呼び出した。
エラーメッセージにエラーが検知された行数が出ていませんか?エラーメッセージ全体を見たいです。
あなたの回答
tips
プレビュー