javascript - Problem using video as page background

Question

I prepared three things, one is a solid color p background, one is a screenshot of the first frame of the video, and one is a video.

What I want is that if the video cannot be loaded successfully, use a screenshot instead. If the screenshot cannot be loaded successfully, use a solid color p instead.

Could you please tell me how to implement this function, or how to capture the completion status of video and screenshot loading?

I am a novice, please give me some advice~ (It would be better to post some vivid code, thank you all)

Answer 1

There are a lot of things like this on the Internet
http://www.webhek.com/post/vi...
For example, the one above
has code and demo

Answer 2

Same as the two answers above....

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

I haven’t tested it specifically, but there should be no problem.

Answer 3

var video = document.getElementById("video");
1. Properties and methods
a. Error

video.error; //null: normal

video.error.code; //Return error code 1. User termination 　 2. Network error 　 3. Decoding error 　 4. Invalid URL

b, network status

video.currentSrc; //Return the URL of the current resource

video.src = value; //Return or set the URL of the current resource

video.canPlayType(type); //Whether resources in a certain format can be played

video.networkState; //Return network status code 0. This element is not initialized | 1. Normal but not using the network | 2. Downloading data | 3. No resource found

video.load(); //Reload the resource specified by src

video.buffered; //Return to the buffered area

video.preload; //Return preloading information None: No preloading Metadata: Preloading resource information Auto:

c, play status

video.currentTime = value; //The current playing position, assigning a value can change the position

video.startTime; //Generally 0, if it is streaming media or a resource that does not start from 0, it will not be 0

video.duration; //The current resource length stream returns infinite

video.paused; //Whether to pause

video.defaultPlaybackRate = value;//The default playback speed can be set

video.playbackRate = value; //Current playback speed, change immediately after setting

video.played; //Return to the played area, TimeRanges

video.ended; //Is it ended

video.autoPlay; //Whether to play automatically

video.loop; //Whether to loop or not

video.play(); //Play

video.pause(); //Pause

d, video control

video.controls;//Whether there is a default control bar

video.volume = value; //Volume

video.muted = value; //Mute

2. Event

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

XXX is the event type
loadstart //The client starts requesting data

progress //The client is requesting data

suspend//Delayed download

abort //The client actively terminates the download (not due to an error)

loadstart //The client starts requesting data

error //An error was encountered while requesting data

stalled //Internet speed stalled

play //Triggered when play() and autoplay start playing

pause//pause() triggers

loadedmetadata //Successfully obtained resource length

waiting//Waiting for data, not an error

playing//Start playback

canplay//Can play, but may be paused due to loading

canplaythrough//can be played, all songs have been loaded

seeking //Searching

seeked//Finished looking

timeupdate //Playing time changes

ended//End of play

ratechange//Playback rate change

durationchange //Resource length change

volumechange //Volume change