videoindsættelse på siden: brug javascript og flash

  1. Publikationsforfatter

For en tid siden nævnte jeg videotaggen, der blev implementeret specielt i html5. Men desværre vil brugen af ​​mærket medføre større ulempe frem for gavn. Derfor fortæller jeg dig om, hvordan du helt kan gøre med et videoformat.

for et projekt havde jeg brug for at finde muligheden for at afskrive videoer på webstedet. Det var ikke muligt at lave en spiller fra bunden på en flash (for en start har jeg ikke et udviklingsmiljø og ikke leverede det), så det var faktisk nødvendigt at finde en passende kandidat i ansigtet af en flash player. intet særligt kompliceret var påkrævet, da takket være YouTube-brugere er meget let at navigere i denne slags spillere;)

2 kandidater placeret på webstederne flv-mp3.com (et projekt fra uppod'a) og Flowplayer . Efter at have lavet et lille poke hver, blev den første hurtigt forladt til fordel for den kombination, der leverede den nuværende api. som tiden har vist, slap den indre tarm ikke mig (selvom nogle mennesker lykkedes at komme ind i vtyuhat flv-mp3.com).

Som du ved er det første indtryk temmelig vildledende, og der gives nogle gange fortrinsvis den mindst mættede enhed (især hvis den bruger modersmål). Det er denne tilgang, der var efterspurgt på flv-mp3: tjenesten giver mulighed for at "samle" en spiller med specificerede egenskaber (i formular Angiv den fil, der afspilles, pauseskærmen, dimensioner og nogle andre parametre) og få outputkoden til at indsætte filen. Ja, muligheden kan virke meget praktisk, især for folk der anser html for en stærk heks, for ikke at nævne js og så videre.

kun den periodiske tilføjelse af videoer til webstedet er usandsynligt at bidrage til entusiasmen om konstant at "opbygge" spilleren alene. Alternativt kan du undersøge alle indstillinger og automatisere via server sproget. men dette princip kan kun kaldes forvrænget (det er meget nemmere at indlæse videoer på YouTube og få klar kode til at downloade).

her kommer vi til det meget, der allerede kan kaldes en sorceress. du vil forstå javascript magi? Jeg vil vise, at det slet ikke er vanskeligt (endnu lettere end at bruge en konstruktør). og hjælp med denne flowplayer. Du kan vælge en version herfra , men den allerførste version, der distribueres under GPL3, er ret egnet til dit websted.

Afspilleren understøtter afspilning af følgende indhold: flv, mp4, m4v (til billeder - jpg, gif, png). Videoen understøttes siden version 9, så der skal ikke være nogen supportproblemer.

Download arkivet med afspilleren og pakk det ud. Du skal overføre 3 filer til webstedet: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf og eksempel / flowplayer-NumVer.min.js , hvor NumVer er bare versionsnummeret og kan for eksempel være 3.2.7 .

Den første fil indeholder kontrolpanelet, den anden - direkte afspilleren og den tredje er linket der giver api. De første 2 filer (* .swf) skal være i samme mappe. nu er det tid til den enkleste kode. det kan være:

<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "tekst / 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- elementet med afspilleren ID er den beholder, hvor videoen skrues af. i den anden linje er javascript filforbindelsen. Direkte for output er ansvarlig en funktion flowplayer () , som passerer 3 parametre:

  1. identifikatoren for det element, hvor videoen skal afspilles
  2. stien til afspilleren (nemlig til afspilleren, og ikke til de betjeningselementer, der automatisk skal indlæses);
  3. Nogle ekstra parametre.

Af den måde kan du udover identifikatoren direkte sende en henvisning til et objekt eller en vælger.

Koden ovenfor viser ikke noget, men det giver en ide om, hvor nemt det er at forbinde en flowplayer til en side. For at output video, skal du oprette en tredje parameter, og det er forresten ganske enkelt også.

for enkelhed: den tredje parameter (config) er et associativt array, hvori de følgende elementer kan beskrives:

  • klip - ved hjælp af denne nøgle kan du "lave" globale indstillinger, for eksempel om du vil starte automatisk buffering (autoBuffering) eller afspilning (autoPlay), hvordan du skalere indholdet (skalering med værdien af ​​pasform holder det oprindelige billedforhold og for normal video vil blive brugt, måske kun det). Du kan også angive den fil, der skal afspilles (url), og endda suspendere hændelser (funktioner, der vil blive kaldt, for eksempel når filmen begynder at spille);
  • afspilningsliste er en regelmæssig matrix (liste). hvert element kan være en streng (i dette tilfælde er strengen adressen til klipet, der afspilles) eller et associativt array. i det andet tilfælde kan datasættet ses som et datasæt svarende til klippetasten fra det foregående element, dvs. du kan angive at bruge buffering, starte afspilning osv .;
  • plugins - tjener til at udvide standardfunktioner. Et af funktionerne er evnen til at ryste grænsefladen lige på stedet.

Nu et lille eksempel, der indeholder en demonstration af mulighederne:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / afspiller / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false : 'fit'}, afspilningsliste: [{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 '], // for at manipulere plugins-kontrollerne: {controls: {url:' flowplayer.controls-3.2.16.swf ', spilleliste: falsk , // fjerner tilbagespolingsknapper stop: true, // tilføj stopknappen scrubber: true // false deaktiverer scrolling af videoen}}}); </ script>

Den præsenterede kode angiver følgende som globale indstillinger: Deaktivering af automatisk startafspilning, deaktivering af automatisk buffering, skalering af video for at passe til vinduet. Som en afspilningsfil anvendes et billede og en video, og indstillingerne for billedet overskrides (da det skal indlæses automatisk). Når du klikker på billedet (eller afspilningsknappen), vises videoen. Som du kan se, er alt meget simpelt. Hvis du vil tilføje et andet videoklip, skal du blot tilføje et nyt element til afspilningslisten, adskilt af et komma. hvis automatisk afspilning af afspilningslisten er påkrævet, er der indstillet i det associative array klip, er værdien af ​​automatisk afspilning sat til ægte.

Dokumentation indeholdende api-funktioner er placeret her . hvis nogen ikke forstår engelsk - det er ligegyldigt, alt er helt klart der. og efter at have analyseret koden ovenfor, er det helt muligt at forstå, hvad der ligger i havnen. Jeg anbefaler stærkt en kig, der er sikkert en "indstilling", der vil være efterspurgt.

eksempel kan se her . glem ikke at kigge på kildekoden (Ctrl + U)

Publikationsforfatter

offline 1 uge

x64 (aka andi)

Kommentarer: 2842 Publikationer: 395 Registrering: 02-04-2009

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

Чем лучше юзабилити сайта – тем больше лояльных клиентов
Хотите понять, как посетители воспринимают сайт? Это очень просто. Представьте, что вы говорите по телефону с директором, и в это время вам звонит кто-то из родственников, а у вас еще работы на четыре

Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

Гид по UX исследованиям для начинающих
В индустрии, в основе которой лежит использование людьми наших продуктов, услуг и приложений, исследования просто необходимы. Мы задаем вопросы. Мы делаем пометки. Мы стараемся узнать все, что возможно,

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

Что такое юзабилити и зачем оно нужно
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Юзабилити сайтов, интернет-магазинов — это неотъемлимая часть выгодного ведения бизнеса. Задача юзабилити

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

5 шагов для успешного юзабилити-тестирования приложения
Представьте: вы придумали и разработали мобильное приложение с приятным, на ваш взгляд, дизайном, удобным функционалом, полезными опциями, выпустили релиз продукта, но… Несмотря на мощную маркетинговую

Карта