web-dev-qa-db-ja.com

fullpage.jsでHTML5ビデオ自動再生機能が機能しない

hTML5ビデオの自動再生が機能していません。

<video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo">

また、= "true"値なしで試しましたが、どちらも機能しません。私はすでに他のサイトで同じコードを使用していて、それはうまく機能しました。

FullPage.jsに基づくフレームワークを使用していますが、ファイルに関連するものを探しましたが、何も見つかりませんでした。

ご覧になりたい場合は、サイトは http://agenciamilk.com/site/2/ にあります。ありがとう

javascripthtml5html5-videofullpage.js
6
Filipe Teixeira

afterRender fullpage.jsプラグインが提供するコールバックを使用する必要があります。

afterRender（）
このコールバックは、ページの構造が生成された直後に発生します。これは、他のプラグインを初期化するため、またはドキュメントの準備が必要なコードを起動するために使用するコールバックです（このプラグインはDOMを変更して、結果の構造を作成するため）。

ライブの例を見ることができます ここ または、fullpage.jsダウンロードの examplesフォルダー で見つけることもできます。

そして、あなたはそれが使用しているソースコードを簡単に見ることができます：

$(document).ready(function () {
    $('#fullpage').fullpage({
        verticalCentered: true,
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        afterRender: function () {

            //playing the video
            $('video').get(0).play();
        }
    });
});

更新

これは、fullpage.js> 2.6.6では不要になりました。タグautoplayが含まれている限り、セクションにアクセスすると自動的にビデオが再生されます。

<video autoplay loop muted controls="false" id="myVideo">
    <source src="imgs/flowers.mp4" type="video/mp4">
    <source src="imgs/flowers.webm" type="video/webm">
</video>

（ページの読み込みではなく）セクションの読み込み時にのみ再生する場合は、data-autoplayを使用します。詳細 ドキュメントで 。

9
Alvaro

"isInViewport"プラグイン（以下にリンク）を使用して、現在ビューポートにあるビデオを見つけ、それに応じていくつかのjsコードを実行できます。

$(function () {
    $('#fullpage').fullpage({
        verticalCentered: true,
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        afterRender: function () {
            $('video').each(function () {
                if ($(this).is(":in-viewport")) {
                    $(this)[0].play();
                }
            }
    });
});

everyビデオ要素をループすることは、採用するのに最も効率的な方法ではありませんが、これで十分に始めることができます。

jQueryプラグイン：isInViewport

1
CalisZA

autoplay="autoplay"をお試しください

http://www.w3schools.com/tags/att_video_autoplay.asp

ここで「HTMLとXHTMLの違い」セクションに言及します。

1
Devin H.

申し訳ありませんが、コメントするだけの担当者がまだいません。あなたがしようとした：

autoplay="autoplay"

？

1
M.Bush

または、autoplayプロパティを使用することもできます。

<video preload="auto" autoplay loop="loop" muted="muted" volume="0" id="myVideo">
//----use just this one---^
0
Suman Bogati