Meskipun hasilnya bisa sangat asli dan menarik, saya harus mengatakan itu memiliki tiga kelemahan: mereka tidak bisa dibungkam, jika video memiliki iklan, mereka juga akan muncul, dan dapat memperlambat waktu loading blog, jadi jika ada yang ingin untuk menggunakannya, dapat mempertimbangkan menempatkan hanya pada acara-acara khusus, atau blog yang memuat sangat cepat.
Juga bisa dilakukan di HTML5, masalah dengan metode ini adalah bahwa Anda perlu memuat video dalam 3 format yang berbeda (mp4., WebM. Dan OVG.) Bersama dengan gambar untuk browser yang tidak mendukung mereka, jadi ini YouTube Pilihan tampaknya lebih praktis bagi saya, meskipun kekurangan.
Anda dapat melihatnya bekerja pada ini demo blog
Tangga
. 1 Langkah pertama adalah tepat di atas </ head> tag, script ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Dan yang satu ini juga:
<script type='text/javascript'>
/ / <! [CDATA [
/ * Plugin jQuery tubular
| * Oleh Sean McCambridge
| * Http://www.seanmccambridge.com/tubular
| * Copyright 2012
| * Berlisensi di bawah Lisensi MIT
| * Nikmati.
| *
| * Thanks,
| * Sean * /
var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper video';
jQuery.fn.tubular = function (videoId, wrapperId) {
wrapperId = (typeof (wrapperId) == terdefinisi)? 'Wrapper video': wrapperId;
t = setTimeout ("resizePlayer ()", 1000);
jQuery ('html, body') css ('tinggi', '100% ').;
jQuery ('body'). tambahkan ('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"> <div id="ytapiplayer"> Anda perlu Flash player 8 + dan memampukan JavaScript untuk melihat video ini </ div> </ div> <div id = "video penutup" style = "position: fixed; width:. 100%; height: 100%; z-index: 2; "> </ div> ');
jQuery ('#' + wrapperId) css ({position: 'relatif', 'z-index': 99}).;
var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
Durasi var;
var iframe = '<iframe id = "myytplayer" width = "' + videoWidth + '" height = "' + videoHeight + '" src = "http://www.youtube.com/embed/' + + videoId + + VideoId '"frameborder =" 0 "allowfullscreen> </ iframe>';
jQuery ('# ytapiplayer') html (iframe).;
jQuery (window). mengubah ukuran (function () {
resizePlayer ();
});
kembali ini;
}
Fungsi onYouTubePlayerReady (playerId) {
ytplayer = document.getElementById ("myytplayer");
ytplayer.setPlaybackQuality ('medium');
ytplayer.mute ();
}
fungsi resizePlayer () {
var newWidth = jQuery (window) width ().;
. var newHeight = jQuery (window) tinggi ();
.. jQuery ('# yt-wadah, # video cover') lebar (newWidth) tinggi (newHeight);
if (newHeight> newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
.. jQuery ('# myytplayer') lebar (newWidth) tinggi (newWidth / videoRatio);
}
/ /]]>
</ Script>
<script type='text/javascript'>2. Kemudian cari <body yang> tag (CTRL + F)
/ / <! [CDATA [
$ () Ready (function. () {
. $ ('Body') tubular ('61BLn00AN_w', 'wrapper video');
});
/ /]]>
</ Script>
Atau jika Anda menggunakan template dari Template Designer, menemukan baris ini:
<body expr:class='"loading" + data:blog.mobileClass'>. 3 Di bawah salah satu dari dua ini, tambahkan ini:
<div id='wrapper-video'>. 4 Sekarang mencari </ body> tag, dan sebelum menempatkan ini:
</ Div>Simpan perubahan dan hanya itu. Dalam merah Anda harus menempatkan ID video Youtube, ID adalah karakter yang muncul pada akhir URL:
Ingat: Tidak ada pilihan untuk menonaktifkan, jadi jika Anda tidak ingin memiliki suara seperti dalam blog demo, Anda harus memilih video yang tidak memiliki suara. Saya juga merekomendasikan menggunakan video dalam HD jika anda tidak ingin ada bagian hitam untuk menunjukkan sekitarnya.
Jika Anda menggunakan jQuery, menghapus versi lain bahwa Anda harus menghindari duplikasi dan memiliki masalah.
Penulis | jQuery Tubular
Tidak ada komentar:
Posting Komentar