2017-09-07 1 views
0

J'ai un code embed comme:Comment accéder à une vidéo Dailymotion à l'aide de l'API JS lorsque l'ID de la vidéo est inconnue?

<iframe id="video1" class="video" src=""//www.dailymotion.com/embed/video/VIDEO_ID?autoPlay=1&wmode=transparent&loop=1&controls=0&showinfo=0&api=1&endscreen-enable=0&mute=1" allowfullscreen="true" frameborder="0" width="560" height="349"></iframe> 

Je tente d'accéder à cette vidéo avec Javascript mais l'ID vidéo n'est pas connue à l'avance (il doit pouvoir être mis au sein de notre CMS et modifiée par les éditeur). Il est également possible d'avoir plus d'une vidéo sur la page. Coder en dur le (s) identifiant (s) vidéo dans mon fichier .js n'est pas possible. En utilisant l'API Javascript, j'ai besoin d'écrire une fonction play/pause personnalisée (en passant dans l'objet bouton sur lequel j'ai cliqué) et aussi de détecter quand la vidéo est terminée et de la redémarrer (pour imiter looping, apparemment Dailymotion ne supporte pas pour une raison quelconque). Mais il semble un appel à:

DM.Player(document.getElementById(iframeID), { video: VIDEO_ID}) 

nécessite à connaître l'ID de la vidéo (je connais l'ID iFrame où la vidéo est, mais apparemment cela ne suffit pas pour accéder au lecteur comme il est pour d'autres plates-formes vidéo).

Je dois ensuite être en mesure de créer une fonction pour appeler la lecture ou la pause selon que l'utilisateur a cliqué sur la bascule lecture/pause sur une vidéo spécifique. Ma connaissance Javascript n'est pas géniale, mais j'ai pu le faire avec d'autres plateformes en connaissant l'identifiant iframe. La lecture/pause fonctionne si je code en dur un identifiant vidéo mais seulement s'il y a une vidéo sur la page et seulement si je n'essaie pas de "boucler" la vidéo.

Ceci est une vidéo privée, si cela est important - nous voulons que ce soit uniquement sur notre site web et non sur Dailymotion. Pseudo-code grandement apprécié car je trouve sa documentation API un peu incomplète pour un nouveau venu (comme ne pas spécifier si les paramètres sont obligatoires ou facultatifs, et ne pas énumérer les options disponibles comme pour les paramètres et les événements lors de l'initialisation DM.Player)

EDIT: Voici comment j'accéder à l'API vidéo avec d'autres services d'hébergement vidéo (YouTube, Vimeo, Brightcove, etc.)

Je construis un tableau de tous les éléments HTML avec un certain nom de la classe (rappelez-vous, il peut être plus d'une vidéo). Supposons que le nom de la classe soit ".video", donc je construis un tableau de tous les ".video" sur la page et l'identifiant HTML correspondant. J'utilise ensuite document.getElementById pour remplir le tableau avec les joueurs.

Puis dans la fonction clic lecture/pause, je peux accéder à la vidéo comme ceci:

var player = players[index]; 
var state = player.getPlayerState(); 
if (state == 1) { 
    player.pauseVideo(); 
} 
else { 
    player.playVideo(); 
} 

Cela ne fonctionne pas pour Dailymotion parce que le DM ID de la vidéo réelle (et non l'ID de l'élément HTML) doit être connu à l'avance. Je me demandais s'il y avait un moyen d'accéder à la vidéo via l'API Javascript sans connaître l'identifiant de la vidéo?

+0

Je suppose que je ne suis pas suivi. l'ID vidéo? Quelles autres données avez-vous? C'est comme demander "Comment téléphoner à quelqu'un sans utiliser son numéro de téléphone?" – johnh10

+0

@ johnh10 J'ai mis à jour ma question pour expliquer comment j'accède à des vidéos sans connaître l'ID vidéo. Comme indiqué dans ma question, normalement je n'ai besoin que de l'identifiant iFrame ou de l'élément HTML (que j'attribue). J'espère que ça aide. – user0474975

Répondre

0

Je n'utilise pas l'API DailyMotion mais j'ai corrigé cette expérience qui pourrait vous être utile.

Voir si les commentaires dans mon code exemple ci-dessous vous aide à comprendre comment utiliser vos propres boutons avec des fonctions JS et comment gérer la vidéo « end » événement, etc.

<!DOCTYPE html> 
<html> 
<body> 

<!-- 1. Load DailyMotion API (Javascript) --> 
<script src='https://api.dmcdn.net/all.js'> </script> 

<!-- 2. Create container for DM Player instance --> 
<div id='player'></div> 

<!-- 3. Javascript stuff goes here --> 
<script> 

    //Set VIDEO_ID (retrieve or update from your CMS) 
    //**example** var VIDEO_ID = get_video_id.php **where PHP returns/echo the text of ID** 

    var VIDEO_ID = "xwr14q"; //update this via your CMS technique 

    //Create DM Player instance// 
    var player = DM.player(document.getElementById('player'), { 
    video: VIDEO_ID, 
    width: "100%", height: "100%", 
    params: { autoplay: false, mute: true } 


    }); 

    //Handle video ending (seek back to zero time)// 
    player.addEventListener('end', function (evt) { evt.target.currentTime = 0; evt.target.play() }); 

    //Control functions for DM Player instance// 
    function func_Play() 
    { player.play(); } 

    function func_Pause() 
    { player.pause(); } 

</script> 



<p> 

<!-- Buttons for play pause --> 
<button onclick="func_Play()"> PLAY </button> 

<button onclick="func_Pause()"> PAUSE </button> 

</p> 

</body> 
</html> 

en ce qui concerne également

"...Il est possible d'avoir plus d'une vidéo sur la page »

Est-ce que des « tests de qualité de l'expérience » Juste être sûr que vos utilisateurs ne me dérange pas plusieurs vidéos en boucle en cours d'exécution à la fois (par exemple:. peut ralentir Pour gérer plusieurs vidéos, je placerais chaque lecteur vidéo dans sa propre page HTML (comme ci-dessus le code indiqué), puis dans la page principale. Il suffit de charger plusieurs iframes pointant vers le code HTML de chaque joueur

+0

Merci pour cette réponse. C'est la définition de l'ID vidéo que je ne suis pas en mesure de comprendre comment faire. Le code HTML est déjà généré et les vidéos sont remplies au moment où le script est appelé. Le Javascript est côté client et donc à moins qu'il ne soit codé en dur comme votre exemple, je ne peux pas obtenir l'ID vidéo. Toutes les autres API que j'ai utilisées (telles que YouTube ou Vimeo) vous permettent d'utiliser l'identifiant iFrame. Je vais mettre à jour ma question pour inclure ce que je fais avec d'autres API. – user0474975