javascript - Problème lors de l'utilisation de la vidéo comme arrière-plan de la page

Question

J'ai préparé trois éléments, l'un est un arrière-plan de couleur unie, l'autre est une capture d'écran de la première image de la vidéo et l'autre est une vidéo.

Ce que je veux, c'est que si la vidéo ne peut pas être chargée avec succès, utilisez plutôt une capture d'écran. Si la capture d'écran ne peut pas être chargée avec succès, utilisez plutôt une couleur unie.

Veuillez me dire comment implémenter cette fonction, ou comment capturer l'état d'achèvement du chargement de la vidéo et de la capture d'écran ?

Je suis novice, donnez-moi quelques conseils ~ (Ce serait mieux si vous pouviez poster du code vivant, merci à tous)

Answer 1

Il y a beaucoup de choses de ce genre à rechercher sur Internet
http://www.webhek.com/post/vi...
Par exemple, ce qui précède #🎜🎜 # a un code, il y a une démo

Answer 2

Identique aux deux réponses ci-dessus....

<p class="wrapper"></p>

<script type="text/javascript">
var loadBG = (function(){
    var wrapper = document.querySelector('.wrapper'),
        tpl = '<p class="bg" style="background:#000;">我是纯色</p>',
        video = document.createElement("video"),
        img = document.createElement("img");

    var FSM = {
        "video" : {
            "fn" : function(){
                var _self = this;
                video.onload = function(e){
                    wrapper.appendChild(video);
                };
                video.onerror = function(e){
                    _self.fsm.img.fn.call(_self);
                };
                video.src = "bg.video";
            } 
        },
        "img" : {
            "fn" : function(){
                var _self = this;
                img.onload = function(e){
                    wrapper.appendChild(video);
                };
                img.onerror = function(e){
                    _self.fsm.def.fn.call(_self);
                };
                img.src = "bg.img";
            }
        },
        "def" : {
            "fn" : function(){
                wrapper.innerHTML = tpl;
            }
        }
    };

    return {
        fn : function(){
            this.fsm = FSM;
            this.fsm.video.fn.call(this);
        }
    }
})();

loadBG.fn();

</script>

Je ne l’ai pas testé spécifiquement, mais il ne devrait y avoir aucun problème.

Answer 3

var video = document.getElementById("video");
1 Propriétés et méthodes
a Erreur

.

video.error; // nul : normal

video.error.code; //Retour du code d'erreur 1. Fin de l'utilisateur 　 2. Erreur réseau 　 3. Erreur de décodage 　 4. URL invalide

b, état du réseau

video.currentSrc; //Renvoie l'URL de la ressource actuelle

video.src = value; //Renvoie ou définit l'URL de la ressource actuelle

video.canPlayType(type); //Si les ressources dans un certain format peuvent être lues

video.networkState; //Renvoie le code d'état du réseau 0. Cet élément n'est pas initialisé | 1. Normal mais n'utilise pas le réseau | 2. Téléchargement de données 3. Aucune ressource trouvée

video.load(); //Recharge la ressource spécifiée par src

video.buffered; //Retour à la zone tampon

video.preload; //Renvoyer les informations de préchargement Aucun : aucun préchargement Métadonnées : préchargement des informations sur les ressources Auto :

c, statut de lecture

video.currentTime = value; //La position de lecture actuelle, l'attribution d'une valeur peut changer la position

video.startTime; //Généralement 0, s'il s'agit d'un streaming multimédia ou d'une ressource qui ne démarre pas à 0, ce ne sera pas 0

video.duration; //Le flux de longueur de ressource actuel renvoie une valeur infinie

video.paused; // Faut-il mettre en pause

video.defaultPlaybackRate = value;//La vitesse de lecture par défaut peut être définie

video.playbackRate = value; //Vitesse de lecture actuelle, change immédiatement après le réglage

video.played; //Retour à la zone de lecture, TimeRanges

video.ended; //Est-ce terminé

video.autoPlay; //Si la lecture est automatique

video.loop; //Que ce soit en boucle ou non

video.play(); //Jouer

video.pause(); //Pause

d, contrôle vidéo

video.controls;//S'il existe une barre de contrôle par défaut

video.volume = valeur; //Volume

video.muted = valeur //Muet

2. Événement

video.addEventListener("XXX" , function(){
    //.....
})

XXX est le type d'événement
loadstart //Le client commence à demander des données

progression //Le client demande des données

suspendre//téléchargement retardé

abort //Le client met activement fin au téléchargement (pas à cause d'une erreur)

loadstart //Le client commence à demander des données

erreur //Une erreur s'est produite lors de la demande de données

bloqué //Vitesse Internet bloquée

play // Déclenché lorsque play() et autoplay commencent à jouer

déclencheur pause//pause()

loadedmetadata // Longueur de ressource obtenue avec succès

en attente//En attente de données, pas d'erreur

lecture // Démarrer la lecture

canplay//Peut jouer, mais peut être mis en pause en raison du chargement

canplaythrough // peut être joué, toutes les chansons ont été chargées

recherche //Recherche

cherché // Fini la recherche

timeupdate //Le temps de lecture change

terminé//Fin du jeu

changement de taux//changement de taux de lecture

durationchange //Changement de longueur de ressource

changement de volume //Changement de volume