web-dev-qa-db-fra.com

Vidéo YouTube intégrée avec une vitesse personnalisée (par exemple 3)

J'ai une vidéo YouTube intégrée sur une page et j'ai un curseur avec lequel je peux définir la vitesse du lecteur.

J'utilise player.setPlaybackRate(value);

Le problème est que je veux des plages de 0,5 à 3, mais l'API du lecteur limite les valeurs uniquement à [0.25, 0.5, 1, 1.25, 1.5, 2] Prédéfini.

Sur YouTube, je peux facilement régler la vitesse avec document.getElementsByTagName("video")[0].playbackRate = 3 mais sur l'iframe je n'ai pas un tel accès.

javascriptapivideoyoutubeyoutube-api
47
Nikolay Kostov

Où voyez-vous que l'API du lecteur limite les valeurs? Dans l'API javascript, vous pouvez utiliser setPlaybackRate pour définir le taux de lecture suggéré, mais il indique qu'il n'y a aucune garantie que ce que vous envoyez sera défini. Vous devez utiliser getAvailablePlaybackRates pour obtenir la liste des taux de lecture, puis choisissez celui qui convient. Vous pouvez déterminer le taux auquel il a été réellement défini en écoutant onPlaybackRateChangeevent . Si vous essayez de le régler sur 3 et que ce n'est pas l'un des taux disponibles, il arrondira vers 1 au taux le plus proche.

17
Russ Savage

EDIT: Cela ne fonctionne plus.

Cela est dû à la même politique d'origine. Lorsqu'un iframe est accédé par l'origine racine (votre site Web), il semble également changer l'origine de l'iframe. La vidéo ne peut donc pas se charger depuis une autre origine (youtube.com). Voir mon test sur JSFiddle .

Je pense que le fait qu'il fonctionnait auparavant était un problème de sécurité XSS qui a été résolu récemment. Je ne peux donc pas imaginer que modifier quelque chose dans l'iframe youtube soit encore possible. Du moins pas de cette façon.

Merci @maxple de l'avoir souligné!

Message d'origine:

Cela devrait être possible avec les nouveaux navigateurs et l'attribut HTML5 Iframe Sandbox :

Avec l'option, vous pouvez accéder au nœud DOM iframe.

<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>

Voir ceci post pour plus d'informations.

12
Dustin Hoffner

Vous ne pouvez pas faire la même chose dans un iFrame.

Ce que vous faites sur Youtube, c'est de modifier le tag vidéo réel, mais la seule façon de le faire à partir d'un autre site Web est via l'API fournie par Google (en raison de préoccupations XSS), et s'ils ont décidé de n'autoriser que les valeurs proposées, votre meilleur coup en dehors de faire quelque chose qui pourrait enfreindre leurs conditions d'utilisation, est de contacter Google et leur demander d'autoriser le troisième niveau de vitesse via l'API.

6
JaviCasa

malheureusement, vous essayez de modifier le contenu de l'iframe d'un autre domaine. aucun des principaux navigateurs ne vous permet de le faire via javascript.

j'ai essayé et créé un fichier php qui obtiendrait le contenu de l'iframe youtube intégré

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

mais en quelque sorte youtube bloque différentes origines et cela ne m'a donné qu'un écran noir. comme je l'ai deviné parce que YouTube utilise Flash Player pour intégrer des vidéos (au lieu de html5 comme ils le font sur le site Web).

donc je suis désolé mais c'est impossible.

3
user3870546