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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4791閲覧

HTML5のvideoの再生タイミングを操作したい(読み込み中に動画の頭が切れてしまう)

bpbjsu

総合スコア24

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/28 19:53

編集2018/04/04 16:45

###発生している問題
videoタグを使い、ページを開いた際一度だけ再生される動画を設置しています。
ローディングに時間がかかった際、動画の頭の部分が切れて再生されてしまいます。

<div id="loading"></div> <video autoplay muted playsinline id="video-background-pc" poster="-poster.png"><source src="movie.mp4"></video>

###実現したいこと
ローディング画面が終わった後に動画が始まるようにしたいです。
ローディングが完了もしくは、ローディングページが終了した事を判断して動画再生させることは出来ないでしょうか?

###追記
プラグインを使用しているため詳細な部分があまり理解できませんでした。
「Best Preloader」「BH Custom Preloader」「Preloader」「WP Smart Preloader」を試してみましたが、いずれも同様の現象が起きてしまいました。
背景を設定しない設定ができるもの(ローディングアイコンのみ)で確認しましたが、アイコンがくるくる回っている最中に動画が始まってしまっている様でした。
プラグインを使用せず、独自で設定した方が良いのでしょうか?

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

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

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

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

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

defghi1977

2018/03/28 22:18

> ローディング画面が終わった後に の部分が曖昧です. ローディング処理を行なっている部分を提示願います.
guest

回答1

0

ベストアンサー

ローディングが完了もしくは、ローディングページが終了した事を判断して動画再生させることは出来ないでしょうか?

「ローディングの完了もしくは、ローディングページの終了」をJavaScriptで検知することが出来ればスクリプトからvideo要素を再生(HTMLVideoElement.playメソッドの呼び出し)することが出来ます.
従って, 「ローディング処理・ローディングページ」の実装がどのようになっているのかが問題です.

投稿2018/03/28 23:16

defghi1977

総合スコア4756

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問