質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

Q&A

0回答

341閲覧

vue.js youtube スマホ自動再生

hellohoge

総合スコア10

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

0グッド

0クリップ

投稿2018/11/23 03:38

▲やりたいこと
-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にその関数を呼び出した。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NozomuIkuta

2018/11/23 06:31

エラーメッセージにエラーが検知された行数が出ていませんか?エラーメッセージ全体を見たいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問