javascript - Masalah menggunakan video sebagai latar belakang halaman

Question

Saya menyediakan tiga perkara, satu ialah latar belakang p warna pepejal, satu adalah tangkapan skrin bingkai pertama video, dan satu ialah video.

Apa yang saya mahu ialah jika video tidak berjaya dimuatkan, gunakan tangkapan skrin sebaliknya Jika tangkapan skrin tidak berjaya dimuatkan, gunakan p warna pepejal.

Sila beritahu saya bagaimana untuk melaksanakan fungsi ini, atau bagaimana untuk menangkap status penyiapan video dan pemuatan tangkapan skrin?

Saya orang baru, tolong beri saya nasihat~ (Adalah lebih baik jika anda boleh menghantar beberapa kod yang jelas, terima kasih semua)

Answer 1

Terdapat banyak perkara seperti ini untuk dicari di Internet
http://www.webhek.com/post/vi...
Sebagai contoh, di atas #🎜🎜 # ada kod, Ada demo

Answer 2

Sama seperti dua jawapan di atas....

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

Saya belum mengujinya secara khusus, tetapi sepatutnya tiada masalah.

Answer 3

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

.

video.error; //null: normal

video.error.code; //Kembali kod ralat 1. Penamatan pengguna 　 2. Ralat rangkaian 　 3. Ralat penyahkodan 　 4. URL tidak sah

b、Status rangkaian

video.currentSrc; //Kembalikan URL sumber semasa

video.src = nilai; //Kembalikan atau tetapkan URL sumber semasa

video.canPlayType(type); //Sama ada sumber dalam format tertentu boleh dimainkan

video.networkState; //Kembalikan kod status rangkaian 0. Elemen ini tidak dimulakan | 1. Normal tetapi tidak menggunakan rangkaian | 3. Tiada sumber ditemui

.

video.load(); //Muat semula sumber yang ditentukan oleh src

video.buffered; //Kembali ke kawasan penimbal

video.preload; //Kembali maklumat pramuat Tiada: Tiada pramuat Metadata: Pramuat maklumat sumber Auto:

c、Status bermain

video.currentTime = nilai; //Kedudukan main semasa, memberikan nilai boleh menukar kedudukan

video.startTime; //Secara amnya 0, jika ia adalah media penstriman atau sumber yang tidak bermula dari 0, ia tidak akan menjadi 0

video.duration; //Strim panjang sumber semasa mengembalikan tak terhingga

video.jeda; //Sama ada untuk berhenti seketika

video.defaultPlaybackRate = nilai;//Kelajuan main balik lalai boleh ditetapkan

video.playbackRate = nilai; //Kelajuan main balik semasa, tukar serta-merta selepas menetapkan

video.played; //Kembali ke kawasan yang dimainkan, TimeRanges

video.ended; //Sudah tamat?

video.autoPlay; //Sama ada untuk bermain secara automatik

video.loop; //Sama ada mahu menggelung atau tidak

video.play(); //Main

video.pause(); //Jeda

d、Kawalan video

video.controls;//Sama ada terdapat bar kawalan lalai

video.volume = nilai; //Jilid

video.muted = nilai; //Redam

2, acara

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

XXX ialah jenis acara
loadstart //Pelanggan mula meminta data

kemajuan //Pelanggan sedang meminta data

gantung//Muat turun tertunda

abort //Pelanggan secara aktif menamatkan muat turun (bukan disebabkan ralat)

loadstart //Pelanggan mula meminta data

error //Ralat telah ditemui semasa meminta data

terhenti //kelajuan internet terhenti

play //Dicetuskan apabila main() dan automain mula bermain

jeda//jeda() pencetus

loadedmetadata //Berjaya memperoleh panjang sumber

menunggu//Menunggu data, bukan kesilapan

bermain//Mulakan main balik

canplay//Boleh bermain, tetapi mungkin dijeda kerana memuatkan

canplaythrough//Boleh dimainkan, semua lagu telah dimuatkan

mencari //Mencari

dicari//Selesai mencari

kemas kini masa //perubahan masa main

berakhir//Tamat permainan

perubahan kadar//Perubahan kadar main balik

durationchange //Perubahan panjang sumber

perubahan volum //Perubahan volum