web-dev-qa-db-ja.com

カスタム速度の埋め込みYouTube動画（例：3）

1つのページにYouTube動画を埋め込み、スライダーを使ってプレーヤーの速度を設定できます。

player.setPlaybackRate(value);を使用しています

問題は、0.5から3の範囲が欲しいということですが、プレーヤAPIは値を事前定義された_[0.25, 0.5, 1, 1.25, 1.5, 2]_のみに制限します。

YouTubeではdocument.getElementsByTagName("video")[0].playbackRate = 3で速度を簡単に調整できますが、iframeではそのようなアクセス権がありません。

javascriptapivideoyoutubeyoutube-api
47
Nikolay Kostov

プレーヤーAPIが値を制限しているのはどこでわかりますか？ JavaScript APIでは、 setPlaybackRate を使用して推奨再生レートを設定できますが、送信内容が設定される保証はないということです。 getAvailablePlaybackRates を使用して再生レートのリストを取得し、適切なレートを選択する必要があります。 onPlaybackRateChangeevent を聞くことで、実際に設定されたレートを把握できます。 3に設定しようとしても、それが利用可能なレートの1つではない場合、1に近づいて最も近いレートに丸められます。

17
Russ Savage

編集：これはもう機能しません。

これは、同一起源のポリシーによるものです。 iframeがルートOrigin（あなたのウェブサイト）からアクセスされると、iframeのOriginも変更されるようです。そのため、ビデオは別のオリジン（youtube.com）からロードできません。私の JSFiddleでのテスト を参照してください。

以前は機能していたというのは、最近修正されたXSSのセキュリティ問題だったと思います。そのため、YouTubeのiframeで何かを変更することはもう想像できません。少なくともこの方法ではありません。

指摘してくれてありがとう@maxple！

元の投稿：

これは、新しいブラウザーと HTML5 Iframe Sandbox Attribute で可能になるはずです。

このオプションを使用すると、iframe DOMノードにアクセスできます。

<iframe id="myframe" sandbox="allow-scripts" src="about:blank">    </iframe>

<script>
    var frame = document.getElementById("myframe");
    var fdoc = frame.contentDocument;

    fdoc.getElementsByTagName("video")[0].playbackRate = 3; // or whatever
</script>

詳細はこちら post を参照してください。

12
Dustin Hoffner

iFrame内で同じことを行うことはできません。

Youtube内で行うのは実際のビデオタグを編集することですが、別のWebサイトから編集する唯一の方法は、（XSSの懸念により）Googleが提供するAPIを使用することであり、提案された値のみを許可することを決定した場合、利用規約に違反する可能性のあることを行うこと以外の最善の方法は、 Googleに連絡 し、APIを介して第3レベルの速度を許可するよう依頼することです。

6
JaviCasa

残念ながら、別のドメインのiframeのコンテンツを編集しようとしています。主要なブラウザはどれも、JavaScriptでこれを行うことを許可していません。

youTube埋め込みiframeのコンテンツを取得するphpファイルを試して作成しました

<?php 
    $url = $_GET['url'];
    $contents = file_get_contents($url);
    echo $contents;
?>

しかし、どういうわけかyoutubeは異なる起源をブロックし、それは私に黒い画面しか与えませんでした。私が推測したように、それはYouTubeが埋め込み動画にフラッシュプレーヤーを使用しているためです（ウェブサイトでのようにhtml5の代わりに）。

申し訳ありませんが、それは不可能です。

3
user3870546