վիդեո ներդիր էջում `օգտագործեք javascript եւ flash

1. Հրապարակման հեղինակը
2. x64 (aka andi)

մի քանի անգամ ես նշեցի վիդեո տեքստը, որը հատուկ կիրառվել է html5- ում: սակայն, ցավոք, պիտակի օգտագործումը կնշանակի ավելի մեծ անհանգստություն, քան օգուտ: հետեւաբար, ես ձեզ կասեմ, թե ինչպես կարելի է ամբողջությամբ կատարել մեկ տեսանյութի ձեւաչափ:

մեկ նախագծի համար անհրաժեշտ էի գտնել տեսանյութեր վրիպազերծելու հնարավորությունը: Հնարավոր չէ դերակատարից զրոյից զրկել խաղադրույք կատարելու համար (սկիզբը, ես չունեմ զարգացման միջավայր եւ չեմ ապահովել), այնպես որ անհրաժեշտ էր, փաստորեն, ֆլեշ խաղացողի դիմաց համապատասխան թեկնածու գտնել: ոչինչ չէր պահանջվում հատկապես բարդ, քանի որ YouTube- ի օգտագործողների շնորհիվ շատ հեշտ է նավարկելու նման խաղացողների համար;)

2 թեկնածուներ տեղակայված են flv-mp3.com (uppod'- ից մի ծրագիր) եւ flowplayer . ամեն մի փոքրիկ խուճապ պատրաստելով, առաջինը արագորեն լքված էր հօգուտ կաղապարի, ներկայիս api- ն ապահովելով: քանի որ ժամանակն է ցույց տալիս, ներքին ներդիրը թույլ չի տվել, որ ինձ թույլ չտան (չնայած որոշ մարդիկ կարողացան ստանալ vtyuhat flv-mp3.com):

Ինչպես գիտեք, առաջին տպավորությունը բավական խաբուսիկ է, եւ նախապատվությունը երբեմն տրվում է նվազագույն հագեցած սարքին (հատկապես, եթե այն օգտագործում է մայրենի լեզուն): Այս մոտեցումը, որը պահանջվում էր flv-mp3- ի վրա, ծառայությունը հնարավորություն է տալիս «հավաքել» որոշակի հատկանիշներով խաղացող ձեւը ցույց են տալիս, որ ֆայլը կատարվում է, էկրանի խնայարար, չափսերը եւ որոշ այլ պարամետրեր) եւ ստանալու կոդը, ֆայլը տեղադրելու համար: Այո, տարբերակը կարող է շատ հարմար թվալ, հատկապես այն մարդկանց համար, ովքեր html- ը համարում են ուժեղ կախարդ, չնկատելու js եւ այլն:

միայն կայքի պարբերական ավելացումը հազիվ թե նպաստի խաղացողի անընդհատ «կառուցելու» ոգեւորությանը: այլընտրանք է, դուք կարող եք ուսումնասիրել բոլոր պարամետրերը եւ ավտոմատացնել սերվերի լեզվով: սակայն այս սկզբունքը կարելի է անվանել խեղաթյուրված (YouTube- ում տեսանյութեր շատ հեշտ է բեռնել եւ ստանալ ներբեռնելու համար պատրաստի կոդը):

Այստեղ մենք գալիս ենք այն ամենին, ինչ արդեն կարող է լիովին կախարդ լինել: ցանկանում եք հասկանալ javascript magic? Ես ցույց կտամ, որ դա ամենեւին էլ դժվար չէ (նույնիսկ ավելի հեշտ է, քան օգտագործելով կոնստրուկտոր): եւ օգնել այս հոսպիտալին: դուք կարող եք ընտրել տարբերակ այստեղից , բայց առաջին տարբերակը, որը տարածվում է GPL3- ի ներքո, բավականին հարմար է ձեր կայքի համար:

Խաղացուն աջակցում է հետեւյալ բովանդակության նվագարկումը `flv, mp4, m4v (պատկերների համար` jpg, gif, png): Տեսանյութը հասանելի է 9-րդ տարբերակից, ուստի պետք չէ աջակցություն ունենալ:

Ներբեռնեք արխիվը խաղացողի հետ եւ բացեք այն: Դուք պետք է 3 ֆայլ ներբեռնելու համար: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf եւ օրինակ / flowplayer-NumVer.min.js , որտեղ NumVer- ը պարզապես տարբերակի համարն է, եւ կարող է լինել, օրինակ, 3.2.7 :

Առաջին ֆայլը պարունակում է կառավարման վահանակ, երկրորդը, անմիջապես խաղացողը եւ երրորդը կապը տրամադրում է api: Առաջին 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 ('նվագարկիչ', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

Խաղացողի ID- ի հետ տարվող տարրը այն կոնտեյնն է, որի տեսագրությունը կփակվի: երկրորդ տողում `javascript ֆայլի կապը: Ուղղակի արտադրանքի համար պատասխանատու է մեկ գործառույթ flowplayer () , որն անցնում է 3 պարամետր:

1. այն տարրի նույնացուցիչը, որի վրա պետք է խաղադրվի տեսանյութը.
2. խաղացողի ուղին (այսինքն, խաղացողին, այլ ոչ թե վերահսկողներին, որոնք ինքնաբերաբար բեռնվում են);
3. Որոշ լրացուցիչ պարամետրեր:

Ի դեպ, ի լրումն նույնացուցիչի, դուք կարող եք անմիջապես հղում կատարել օբյեկտի կամ ընտրության համար:

Ստորեւ բերված կոդը ոչինչ չի ցուցադրում, բայց այն գաղափար է տալիս, թե որքան հեշտ է հոսքագծի մի էջին միացնելը: Տեսանյութը թողարկելու համար անհրաժեշտ է ստեղծել երրորդ պարամետր, եւ սա, ի դեպ, բավականին պարզ է:

համար պարզությունը. երրորդ պարամետրը (կոնֆիգուր) է ասոցիացված զանգված, որի մեջ կարելի է նկարագրել հետեւյալ տարրերը.

• clip - օգտագործելով այս բանալին, կարող եք «կատարել» գլոբալ պարամետրեր, օրինակ, թե արդյոք ցանկանում եք ավտոմատ կերպով սկսել buffering (autoBuffering) կամ նվագարկումը (autoPlay), թե ինչպես ընդլայնել բովանդակությունը (մասշտաբները, պիտանի արժեքի հետ կպահպանեն բնօրինակը տեսանկյունից հարաբերակցությունը եւ նորմալ տեսանյութը կօգտագործվի, գուցե միայն այն): Կարող եք նաեւ նշել այն ֆայլը, որը խաղում է (url), եւ նույնիսկ կասեցնելու իրադարձությունները (ֆունկցիաները, որոնք կկոչվեն, օրինակ, երբ ֆիլմը սկսում է խաղալ);
• տեսացանկը հերթական զանգվածն է (ցանկը): յուրաքանչյուր տարրը կարող է լինել string (այս դեպքում, տողը հանդիսանում է կրկնօրինակի հասցեն) կամ ասոցիացված զանգված: երկրորդ դեպքում, տվյալների հավաքածուն կարելի է դիտարկել որպես նախորդ նյութի նման կրկնօրինակի ստանդարտի տվյալների հավաքածու, այսինքն, Դուք կարող եք նշել, որ օգտագործեք buffering, սկսեք նվագարկիչ եւ այլն;
• plugins - ծառայում է ընդլայնել ստանդարտ առանձնահատկությունները: Հատկանիշներից մեկն այն տեղն է, որտեղ տեղադրվում է ինտերֆեյսը:

Այժմ փոքր օրինակ է, որը ներառում է հնարավորությունների ցուցադրում.

<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 ('նվագարկիչ', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: կեղծ, autoBuffering: false, scaling : 'տեղավորումը'}, playlist: [{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, // կցել կոճակը կոճակը: true // կեղծը կասեցնում է տեսանյութի գույնը}}}); </ script>

Ներկայացված կոդը սահմանում է որպես գլոբալ պարամետրեր `անջատելով ավտոտնտեսային նվագարկումը, անջատելով ավտո-բուֆերային արատավորումը, պատուհանի տեղադրելու համար տեսանյութեր չափելը: Որպես նվագարկվող ֆայլ, նկար եւ տեսանյութեր են օգտագործվում, եւ նկարի կարգավորումներն անջատված են (քանի որ այն պետք է ավտոմատ կերպով բեռնվի): երբ սեղմում եք նկարը (կամ խաղի կոճակը), տեսանյութը ցուցադրվում է: ինչպես տեսնում եք, ամեն ինչ շատ պարզ է: եթե ցանկանում եք ավելացնել մեկ այլ տեսահոլովակ, պարզապես մի նոր տարր ավելացրեք երգացանկին, բաժանված է ստորակետով: եթե երգացանկի ավտոմատ նվագարկումը պարտադիր է, ասոցիացված զանգվածի տեսահոլովակում սահմանված է, autoPlay- ի արժեքը սահմանվում է ճշմարիտ:

փաստաթղթերը, որոնք պարունակում են api գործառույթներ այստեղ . եթե որեւէ մեկը չի հասկանում անգլերեն, դա նշանակություն չունի, այնտեղ ամեն ինչ պարզ է: եւ վերը նշված կոդը վերլուծելուց հետո, կարելի է հասկանալ, թե ինչ է գտնվում նավահանգստում: Ես բարձր խորհուրդ եմ տալիս, համոզված լինելով, որ կլինի «ընդլայնված», որը պահանջարկ կունենա:

օրինակ կարող է նայեք այստեղ . մի մոռացեք նայում աղբյուրի կոդը (Ctrl + U)

Հրապարակման հեղինակը

1 շաբաթ անց

x64 (aka andi)

Կարծիքներ: 2842 Հրապարակումներ: 395 Գրանցման: 02-04-2009