Sujet Précédent Sujet Suivant

Vidéo responsive et lecteur de playlist

Fermé
Nguim - Modifié par Nguim le 19/05/2016 à 23:16
 Nguim - 21 mai 2016 à 02:27
Salut à tous !
Je débute en développement web et je suis en train de réaliser un site web qui doit contenir des vidéos. Mais j'ai deux préoccupations :
1- Je voudrais que la vidéo soit responsive, s'adapte à la taille des terminaux. J'ai cherché sur google et j'ai pu grâce à un tutoriel intégrer la vidéo qui s'adapte la taille de l'écran, mais la barre de controle de la video (qui contient pause, arrêt) ne s'adapte pas elle est plus large que la vidéo à l'écran. Voici mon code
- HTML 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="style.css" rel="stylesheet" type="text/css" media="all">
        <title>Brouillon</title>
    </head>
    <body>
    <div class="contenu">
        <video controls="controls" id="video_acc">
            <source src="video_ac.mp4">
        </video>
    </div>
    </body>
</html>


-CSS 

.contenu{
    width: 48%;
    height: 0;
    margin-top: 0px;
    margin-left: 5%;
    padding-bottom: 30%;
    background-color: #0F056B;
}
#video_acc{
	width : 55%;
    height: 60%;
    position: absolute;
    top: 0px;
    left: 0px;
}


2- Je voudrais réaliser un lecteur qui puisse lire les vidéo sous forme playlist un peu comme sur youtube, elephorm, video2brain... Mais je ne pas concrètement si on le fait en CSS ou JavaScript ou PHP. Honnêtement je ne sais pas par où commencer. S'il vous plait veuillez m'aider.
Merci d'avance !
A voir également:

1 réponse

Réponse 1 / 1
opdseu
21 mai 2016 à 00:45
Par là pour la vidéo:
http://www.w3schools.com/tags/ref_av_dom.asp

Quant au responsive en théorie il n'y a pas à adapter mais il faut qu'il y ait la vidéo sous plusieurs formats selon les navigateurs, via la balise source.
Ensuite si vous voulez un lecteur personnalisé vous avez le choix de le faire apparaître au dessus de la vidéo ou à côté et dans ce cas votre lecteur prendra une partie de l'écran; donc prévoir en fonction.



CSS sert à présenter le contenu uniquement. PHP fonctionne sur le serveur et peut servir à obtenir des informations de la base de données(comme une playlist) mais pour le lecteur c'est la balise VIDEO de HTML et l'API javascript qui va avec.
Avec javascript on peut manipuler facilement les éléments de la page, balise et attribut.
Donc assez rapide de dire lors du clic sur un bouton suivant de charger la nouvelle piste et avec load() de recommencer le chargement.
Pour faire une playlist vous pouvez utilise un fichier ou des variables qui contiendront les URL des différentes pistes. Avec la fonction .load() de l'API javascript on charge la variable suivante(tableau) et le tour est joué.
0
Nguim
21 mai 2016 à 02:27
Merci beaucoup pour votre réponse !
Mais j'ai encore un souci c'est que j'ai les bases du javascript mais je n'ai jamais eu à faire quelque chose de complexe avec ce langage. S'il vous plait pouvez-vous m'aider avec un tutoriel ou avec un exemple de code pour pouvoir réaliser enfin mon lecteur ?
Aidez-moi s'il vous plait.
0

Discussions similaires

une image de quelque seconde sur une vidéo
rizumu -
Lapourax -

6 réponses
Video Lyrics sur Youtube
Elianora -
Addibou -

2 réponses