Penjelasan terperinci mengenai pembenaman video dalam halaman HTML dan penukaran video di bawah JS control_HTML/Xhtml_Pengeluaran halaman web

Pertama, kod HTML untuk membenamkan video dalam halaman ialah:

Salin kod

Kod tersebut ialah seperti berikut:

<p id="youku" class="youku"> 
<object id="obx" name="obx" width="290" height="260"> 
<param name="movie" value="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf"></param> 
<param name="allowFullScreen" value="true"></param> 
<param name="allowscriptaccess" value="always"></param> 
<param name="wmode" value="opaque"></param> 
<embed src="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="290" height="260"></embed> 
</object> 
</p>

Antaranya, menggunakan objek dan teg benam pada masa yang sama adalah untuk serasi dengan lebih banyak penyemak imbas, tetapi sila beri perhatian untuk mengekalkan nilai atribut yang sama di bawah kedua-dua tag konsisten.
PS: Untuk pengenalan dan penggunaan teg dan

Kemudian, mari kita bincangkan tentang cara menggunakan JS untuk menukar alamat video terbenam secara dinamik untuk memainkan video seterusnya.
Pada masa ini, ramai orang boleh segera memikirkan menggunakan nama teg atau kaedah DOM untuk mencari atribut nilai nod param di atas dan atribut src nod benam, dan menggunakan tugasan dinamik JS untuk menukar alamat. Walau bagaimanapun, ujian mendapati bahawa walaupun alamat video telah diganti, video yang dipaparkan pada halaman itu kekal tidak berubah, yang membingungkan.

Ternyata semua parameter objek terbenam dimulakan apabila halaman dimuatkan Hanya dengan memuatkan semula ia boleh menukar nilai atribut alamatnya tidak boleh dilaksanakan . Sama seperti pekerja syarikat, alamatnya telah bertukar (berpindah), dia masih pekerja asal dan bukan orang lain.
Terdapat dua kaedah yang sering saya gunakan untuk memuatkannya semula (ambil kod di atas sebagai contoh):
① Gunakan kaedah obj.innerHTML JS untuk menetapkan semula keseluruhan objek objek.

Salin kod

Kod adalah seperti berikut:

/*功能：动态切换视频*/ 
function setvideo(url){ 
var youku = document.getElementById("youku"); 
var htmlstr = "<object id=&#39;obx&#39; name=&#39;obx&#39; width=&#39;290&#39; height=&#39;260&#39;>"; 
htmlstr += "<param name=&#39;movie&#39; value=&#39;"+url+"&#39;></param>"; 
htmlstr += "<param name=&#39;allowFullScreen&#39; value=&#39;true&#39;></param>"; 
htmlstr += "<param name=&#39;allowscriptaccess&#39; value=&#39;always&#39;></param>"; 
htmlstr += "<param name=&#39;wmode&#39; value=&#39;opaque&#39;></param>"; 
htmlstr += "<embed src=&#39;"+url+"&#39; type=&#39;application/x-shockwave-flash&#39; allowscriptaccess=&#39;always&#39; allowfullscreen=&#39;true&#39; wmode=&#39;opaque&#39; width=&#39;290&#39; height=&#39;260&#39;></embed>"; 
htmlstr += "</object>"; 
youku.innerHTML = htmlstr; 
}

②Letakkan iframe dalam bekas p, supaya halaman dalam iframe boleh dimuatkan semula secara dinamik tanpa menjejaskan halaman induk semasa.
Saya tidak akan menulis kod khusus Idea umum ialah:
　1. Gunakan url untuk menghantar nilai.
2. Halaman induk atau halaman anak mencipta domain tersembunyi untuk menyimpan alamat secara dinamik untuk halaman anak diperoleh.
　3. Gunakan kaedah ① untuk menetapkan semula objek objek dalam subhalaman.
4. Kaedah lain seperti window.open adalah jauh dan tidak digalakkan.
Pada ketika ini, membenamkan dan mengawal penukaran video telah berjaya dilaksanakan. Tetapi secara tidak sengaja, saya menemui masalah:
Selepas bertukar kepada video baharu, mengklik muat semula atau menekan F5 atau mana-mana kaedah lain untuk memuat semula halaman akan menyebabkan ralat skrip "objek hilang" muncul. Saya menemui kod ralat dan mendapati ia adalah ralat skrip dalaman dalam Flash:

function __flash__removeCallback(instance, name) { 
instance[name] = null; 
}

Jika denyar digunakan dalam halaman dan kaedah flash.external.ExternalInterface.addCallback digunakan dalam denyar, __flash__removeCallback akan dilaporkan apabila halaman web dimuat semula ralat js: Objek hilang (Baris 53), (Jscript-scriptblock). Tempat panggilan bagi fungsi ini ialah:

__flash__removeCallback(document.getElementById(""), "dewprev");

Jelas sekali, document.getElementById("") di sini mengembalikan null, yang akan menyebabkan __flash__removeCallback melaporkan ralat secara peribadi hendaklah ditulis seperti ini :

function __flash__removeCallback(instance, name) { 
if (instance != null) { instance[name] = null; } 
}

Seseorang telah menguji dan mendapati bahawa document.getElementById("") di sini adalah untuk mendapatkan atribut id/nama Objek kawalan kilat Sebab ralat ini berlaku adalah kerana id/nama tidak ditetapkan untuk Objek, tidak akan ada ralat selepas menetapkannya. Tetapi sebenarnya, semua objek saya mempunyai atribut id/nama, jadi saya tidak bersetuju dengan sebab ini. Dari sudut ini, kaedah menambah id/nama ini boleh menyelesaikan masalah sesetengah orang, dan ini bukan satu-satunya punca masalah ini.
Selepas itu, saya mencari bersungguh-sungguh untuk masa yang lama, dan akhirnya menemui penyelesaian di laman web asing. Ia ditulis oleh seorang bernama Dave Smith. Saya membuat beberapa penambahbaikan berdasarkan kodnya, yang mengurangkan bilangan halaman. Tekanan untuk melaksanakan kod. Kod yang dia berikan adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

<script type="text/javascript"> 
(function(){ 
　　var setRemoveCallback = function(){ 
　　__flash__removeCallback = function(instance, name){ 
　　　　　　if (instance){ 
instance[name] =null; 
} 
}; 
window.setTimeout(setRemoveCallback, 10); 
}; 
setRemoveCallback(); 
})(); 
</script>

Apa yang dia maksudkan secara kasar: menulis semula skrip ini di dalam denyar boleh menyelesaikan masalah Masalah semasa ialah pada satu ketika selepas objek dimuatkan, skrip di dalam denyar akan menimpa fungsi yang anda tulis semula. Oleh itu, tiada jaminan bahawa pemain akan memanggil fungsi yang anda tulis semula apabila tiba masanya. Untuk mencapai matlamat ini, dia menetapkan fungsi untuk mengatasi fungsi yang disediakan dalam denyar setiap 10 milisaat. Masalah ini selesai. Pada masa yang sama, beliau memudahkan kod ini untuk membentuk dua "versi" berikut:
Versi ringkas satu: lebih ringkas sedikit

Salin kod

Kod adalah seperti berikut :

<script type="text/javascript"> 
　　var setRemoveCallback = function() { 
__flash__removeCallback = function(instance, name) { 
　　　　　　　if(instance) { 
instance[name] = null; 
} 
}; 
window.setTimeout(setRemoveCallback, 10); 
}; 
setRemoveCallback(); 
</script>

Versi ringkas dua: sangat mudah

Salin kod

Kodnya adalah seperti berikut:

<script type="text/javascript">
(function(){
var s=function(){
__flash__removeCallback=function(i,n){if(i)i[n]=null;
};
window.setTimeout(s,10);};s();})();
</script>

Saya fikir untuk seketika dan merasionalkan pemikiran saya:
Ralat ini berlaku semasa menyegarkan halaman Proses menyegarkan halaman ialah kematian halaman lama dan muat semula halaman baharu. Secara teorinya, tidak akan ada masalah untuk memuatkan semula halaman baharu, jadi ralat berlaku dalam kerja "aftercare" sebelum halaman lama mati. Saya boleh mencapai tujuan yang sama selagi saya menulis semula fungsi panggil balik di dalam denyar sebelum halaman mati Kod adalah seperti berikut dan ujian lulus.

Salin kod

Kod adalah seperti berikut:

/*解决视频切换内部脚本错误*/ 
<script type="text/javascript"> 
function endcall(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();} 
window.onbeforeunload = endcall; 
</script>