беттегі бейне кірістіру: javascript және flash жазу
Біраз уақыт бұрын html5 ішіне арнайы енгізілген бейне тегтер туралы айттым. алайда, өкінішке орай, тегті пайдалану пайдадан гөрі көп қолайсыздық тудырады. сондықтан, мен сізге бір бейне пішіммен толығымен жасай алатын тәсіл туралы айтып беремін.
бір жобаға сайтымыздағы бұрмаланған бейнелерді табу қажет болды. Ойыншыны жарқылда ойнату мүмкін болмады (басында, менің даму ортасы жоқ және оны қамтамасыз етпеді), сондықтан флеш-ойнатқышқа сәйкес кандидатты табу керек болды. әсіресе күрделі ештеңе талап етілмеді, өйткені YouTube пайдаланушыларының арқасында ойыншылардың осы түріне өту өте оңай;)
2 үміткер flv-mp3.com сайтында орналасқан (uppod'а жобасы) және flowplayer . әрқайсысы кішкентай пексті жасап, біріншісі осы апиты қамтамасыз ететін комбайнның пайдасына тез арада тасталды. уақыт көрсеткендей, ішкі ішек маған кедергі келтірмеді (бірақ кейбір адамдар vtyuhat flv-mp3.com сайтына кіре алды).
Өздеріңіз білетіндей, алғашқы әсер көп алдамшы, ал кейде аз қаныққан құрылғыға (әсіресе ол ана тілін пайдаланса) артықшылық беріледі. Бұл флд-mp3-де сұранысқа ие болатын тәсіл: қызмет көрсету белгілі бір сипаттамалары бар ойыншыны «жинау» мүмкіндігін береді. нысаны ойнатылатын файлды, экран сақтағышын, өлшемдерін және басқа параметрлерді көрсетіңіз) және файлды кірістіру кодын алыңыз. Ия, опция өте ыңғайлы болып көрінуі мүмкін, әсіресе html-ны js және басқаларын айтуға болмайды.
тек сайтқа бейнероликтерді қосу ғана ойыншыны үнемі «салуға» ынтагерлікпен үлес қосуы мүмкін емес. Баламалы түрде сіз барлық параметрлерді зерттеп, сервер тілін автоматтандыруға болады. бірақ бұл принцип тек қана бұрмаланған деп айтуға болады (YouTube-да бейнелерді жүктеу әлдеқайда оңай және жүктеу үшін дайын кодын алу).
біз қазірдің өзінде толығымен сиқыршы деп атауға болатын нәрсеге жеттік. javascript сиқырлығын түсіну керек пе? Мен еш қиындықсыз (конструкторды пайдаланудан оңайырақ) екенін көрсетемін. және осы ағынды ойнатқышқа көмектесу. нұсқаны таңдай аласыз осында , бірақ GPL3-де таратылған бірінші нұсқасы сайтымызға өте ыңғайлы.
Ойнатқыш келесі мазмұнды ойнатуды қолдайды: flv, mp4, m4v (суреттер үшін - jpg, gif, png). Бейнеге 9-шы нұсқаға қолдау көрсетіледі, сондықтан ешқандай қолдау көрсетілмеуі керек.
Мұрағатты ойнатқышпен жүктеңіз және оны ашыңыз. Сізге 3 файлды жүктеуіңіз керек: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf және example / flowplayer-NumVer.min.js , мұнда NumVer - бұл тек нұсқаның нөмірі және болуы мүмкін, мысалы, 3.2.7 .
Бірінші файл басқару панелін, екіншісі - ойнатқышты, ал үшінші - апиді беретін сілтеме. Алғашқы 2 файл (* .swf) бірдей қалтада болуы керек. енді қарапайым коды үшін уақыт келді. ол:
<div id = «player» style = «width: 640px; height: 480px;»> </ div> <script type = «text / javascript» src = «/ src / player / flowplayer-3.2.6.min.js «> </ script> <script type =» text / javascript «> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>
Ойыншы идентификаторы бар div элементі - бұл бейне бұрап шығарылатын контейнер. Екінші жолда - javascript файл байланысы. Шығу үшін тікелей 3 функциядан тұратын бір функция flowplayer () жауап береді:
- Бейне ойнатылатын элементтің идентификаторы;
- ойнатқыштың жолы (автоматты түрде жүктелетін басқару элементтеріне емес, ойнатқышқа);
- Кейбір қосымша параметрлер.
Айтпақшы, идентификатордан басқа, сіз объектіге немесе селекторға тікелей сілтеме бере аласыз.
Жоғарыда келтірілген код ештеңе көрсетпейді, бірақ ол ағынды ойнатқышты бетке қосу қаншалықты оңай екенін түсіндіреді. Бейнені шығару үшін сізге үшінші параметрді жасау қажет, бұл, сөзсіз, өте оңай.
қарапайымдылық үшін: үшінші параметр (config) келесі элементтерді сипаттайтын ассоциативті массив:
- clip - бұл кілтті пайдаланып, сіз жаһандық параметрлерді «жасауға» болады, мысалы, аралықты автоматты түрде іске қосуды (autoBuffering) немесе ойнатуды (autoPlay), мазмұнды масштабтауды қалайсыз (масштабтау масштабын масштабтау бастапқы түпнұсқалық пішімді сақтайды және қалыпты бейне үшін қолданылады, мүмкін, бұл ғана). Сіз ойнатылып жатқан файлды (url) көрсете аласыз және тіпті оқиғаларды тоқтата аласыз (мысалы, фильм ойнатыла бастағанда);
- ойнату тізімі тұрақты жиым (тізім). әр элементтің жолы болуы мүмкін (бұл жағдайда жол - ойнатылатын клиптің мекенжайы) немесе ассоциативті жиым болуы мүмкін. екіншісінде деректер жиынтығы алдыңғы элементтен алынған қысқыш кілтіне ұқсас деректер жиынтығы ретінде көрінуі мүмкін, яғни буферизацияны пайдалануды, ойнатуды бастауды және т.с.с. көрсете аласыз;
- плагиндер - стандартты мүмкіндіктерді кеңейтуге қызмет етеді. Мүмкіндіктердің бірі - интерфейсті сол жерде оңтайландыру мүмкіндігі.
Енді мүмкіндіктің көрсетілуін қамтитын шағын мысал:
<div id = «player» style = «width: 520px; height: 330px;»> </ div> <script type = «text / javascript» src = «/ src / player / flowplayer-3.2.6.min.js «> </ script> <script type =» text / javascript «> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: жалған, autoBuffering: жалған, масштабтау : 'fit'}, ойнату тізімі: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // плагин модульдерін басқару үшін: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // қайтару түймелерін тоқтатады: true, // add stop батырмасы scrubber: true // false виджетті жылжытады}}}); </ script>
Ұсынылған код келесі параметрлерді жаһандық параметрлер ретінде белгілейді: автоматты түрде ойнатуды өшіруді, авто-буферизацияны өшіруді, терезеге сәйкестендіру үшін бейнені масштабтауды. Ойнатылатын файл ретінде суреттер мен бейнелер пайдаланылады және суреттің параметрлері бас тартылады (ол автоматты түрде жүктелуі тиіс). суретті басқанда (немесе ойнату түймесінде) бейне көрсетіледі. Көріп тұрғаныңыздай, барлығы өте қарапайым. егер сіз басқа бейнеклипті қосқыңыз келсе, үтірмен бөлінген ойнату тізіміне жаңа элементті қосыңыз. ойнату тізімін автоматты түрде ойнату қажет болса, ассоциативті жиым клипінде орнатылса, autoPlay мәні true мәніне орнатылады.
api функциялары бар құжаттама орналасқан мұнда . егер біреу ағылшын тілін түсінбесе - бұл маңызды емес, сонда бәрі түсінікті. Жоғарыда келтірілген кодты талдап шыққаннан кейін, докстерде не бар екенін түсінуге болады. Мен өте сұранысқа ие боламын, сөзсіз сұранысқа ие болатын «баптау» болады.
мысал бола алады мұнда қараңыз . бастапқы кодты (Ctrl + U) қарауды ұмытпаңыз
Баспагер
1-аптада офлайн
x64 (aka andi)
Түсіндірмелер: 2842 Басылымдар: 395 Тіркелу: 02-04-2009
Javascript сиқырлығын түсіну керек пе?