Недавно столкнулась с проблемой установки видео на сайте. Оказалось не такой простой задачей. Обычно файлы видео очень велики.
Просто разместить их на сайте простой ссылкой хоть и работало, но не нравилось и то, что открывается сторонним плейером, а мне нужно было и чтобы весил мало и чтобы проигрывалось в том месте странички, где хотелось, и чтобы проигрывалось не просто при загрузке странички, а именно, когда пользователь нажмет на кнопку.
Мучалась без малого две недели. Перерыла все учебники, прочесала весь интернет, ничегошеньки не нашла! Пришлось включить свои мозги и думать этими самыми мозгами. Думаю, мой опыт пригодится многим. Так что радуйтесь, я опять с вами, а вы опять со мной. А значит, все мы вместе.
Если найдете лучший способ - пишите, пусть люди будут счастливы!
Была я недавно в Московском зоопарке. Попала в дельфинарий. Представляете - в зоопарке выступают дельфины, моржи, киты... Это меня так поразило, что все это я быстренько засняла на видео и решила представить миру. И хотя снимала частями выступления, все равно файлы получились большими.
Тут я решила продемонстрировать ролик про моржа. Сам этот ролик включает и выступления и моржа и белого кита. Весит этот мувик 105 мегов, и естесственно, выложить его во всемирной паутине я могу, только увидели бы его немногие. Боюсь, так и не дождались бы загрузки.
Поэтому я решила оптимизировать через программу Flash, которую забросили уже давно, а зря. Сейчас она меня как раз и выручит.
Так что установите, у кого нет эту программу, и будем двигаться дальше. У меня стоит Macromedia Flash 8, ее и будем использовать.
Запускаем и у нас такая картина:
Рис.1. Программа "Macromedia Flash 8"
Открываем новый документ, нажав File|New..., либо просто комбинацию клавиш CTR+N, вот так:
Рис.2. Открытие нового документа
И у нас появляется диалоговое окно:
Рис.3. Диалоговое окно
По умолчанию стоит "Flash document", вот пускай и стоит. Оно нам как раз и нужно. Нажимаем ОК.
И вот наше поле. Чистое и белое. И пока еще пушистое.
Рис.4. Новый документ
Однако я сразу хочу изменить размеры и цвет этого документа. Пусть у меня видеоролик будет шириной 320 на 280 пикселей, а цвет будет черным. Для этого я нажимаю Modify|Document... , либо комбинацию клавиш CTR+J,
Рис. 5. Выбираем...
и видим диалоговое окно Document Properties:
Рис.6. Диалоговое окно "Document Properties"
И тут меняю размеры и цвет. Цвет меняю, нажав на белый квадратик и выбрав черный, вот так:
Рис.7. Меняем размеры и цвет
Нажимаем ОК, и получаем то, чего и хотели, для наглядности я увеличила масштаб до 200%:
Рис.8. Подготовка окончена!
Ну теперь начинается само творчество. Нажимаем File|Import|Import Video... вот так:
Рис.9. Вызов видеофайла
Выскакивает диалоговое окно "Import Video":
Рис.10. Import Video
Нажимаем кнопку Browse и ищем на своем диске свой фильм, у меня он - P1030235.MOV.
Рис.11. Поиск фильма
Нажимаем Open и видим то же диалоговое окно, что и на рис. 10, но уже с заполненным полем и нажимаем Next:
Рис.12.
Далее опять оставляем по умолчанию "Progressive dowmload from a web server", и опять нажимаем Next:
Рис.13.
Ну, а теперь самое интересное. Появляется первый кадр фильма и его временная шкала. Двигая рычажочки начала и конца фильма, для этого нажимая нижние треугольнички, отсекаем ненужные части фильма. У меня получилось вот так:
Рис.14.
Нажимаем кнопку "Next" и идем дальше. Тут выбираем скин, то есть вид нашего мувика. Меня, в принципе, устраивает тот, который стоит по умолчанию. Вы можете поковыряться, выбирая то, что вам по сердцу.
Рис.15.
Выбрали? Нажимаем опять "Next", и в следующем окне ничего не выбираем, просто жмем "Finish":
Рис.16. Finish!
Но это еще не конец. Так что не расслабляйтесь! Появляется диалог с предложением сохранить нашу работу под каким угодно названием. Так как мой фильм про моржа, так я его и назову коротко и ясно - morj.
Рис.17. Сохранение файла под именем morj
Нажимаем на "Save" и... можем расслабиться на несколько минут. Потому как операция может занять несколько минут. Лично у меня она заняла почти 4 минуты, можете за это время сходить и перекусить. Чтобы сделать небольшой перерыв, набраться сил и терпения и идти дальше. А я пока сделала скриншот этой загрузки. Тоже дело:
Рис.18. Вот идет загрузка. Расслабьтесь.
О, уже закончилось и перед нами в центре черного экрана появилась небольшая пипочка. Тыкните на черный экранчик мышкой, если нужно - подвиньте экранчик, совместив с черным нижнем полем, можно просто нажав на экранчик мышкой, и держа удержанной, подвинуть в нужное место. В общем, у меня получилась такая фигнюшка:
Рис.19. Вот что получилось
Вы, наверное удивитесь, что фильм не разложился на кадры и вообще фильма не видно. Только не думайте, что это шутка такая. Я не шучу. Мне вообще сейчас не до шуток. Сегодня суббота и меньше всего мне хотелось бы отрывать время от семьи такими приколами с вами. И вообще уже и ужин прошел и если не успею, придется все отложить на завтра. А ведь завтра воскресенье и мне полагается варенье.
Но вы можете выбрать Control|Test Movie чтобы проконтролировать ситуацию и убедиться, что фильм есть!
Рис.20. Контроль над ситуацией
В выпрыгнувшем диалоге наш фильм проиграется:
Рис.21. Есть фильм!
Можете закрыть это окошко и теперь будьте очень внимательными. Перестаньте жевать и ковыряться в носу. И не говорите, что я это не объясняла!
Нажимаем File|Publish Settings
Рис.22. Вызываем Publish Settings
У нас появляется это самое диалоговое окно Publish Settings:
Рис.23. Вкладка Formats
Обратите внимание, чтобы были галочки у Flash и Html.
Далее переходим к вкладке Flash и убедитесь, что стоит галочка у Compress Movie
Рис.24. Вкладка Flash
Переходим к последней вкладке Html и будьте очень внимательны. Поставьте галочки там, где стоят у меня:
Рис.25. Вкладка Html
В принципе, вы можете поменять размеры (Dimensions), выбрать иное качество фильма (Quality), но если вы установите галочку на Dispay Menu, у ваших посетителей не будет панели управления фильмом, они не смогут ни остановить его, ни просмотреть какую-то часть еще. А убрав галочку "paused to start", фильм будет играть сразу при загрузке странички. Если вы именно этого и хотите, то можете так и сделать. Ваша воля.
Ну, и когда с параметрами определились, нажимаем кнопку Publish, сохраняем нашу работу File|Save и лезем в ту папку, где все это сохранилось. Пока окно программы не закрываем. Она нам сейчас еще понадобится. Пока смотрим, что программа нам сохранила.
Рис.26. Сохраненные файлы
Открыв файлы morj.swf и morf.html убеждаюсь в том, что как ни странно, сразу начинается проигрывание. Поэтому возвращаемся обратну в нашу программу и будьте сейчас предельно внимательны. Мы залезем в програмный код.
В самом низу экрана, слева есть вкладка Properties - Filters - Parameters.
Нажмите на Parameters, появится програмный код:
Рис.27. Меняем правду на ложь
В самой верхней строчке, напротив AvtoPlay нажимаем на true два раза и выбираем появившееся значение false.
После этого сохраняем сам наш файл File|Save и еще раз нажимаем File|Publish Settings и в выскочившем диалоговом окне Publish Settings просто нажимаем кнопку Publish.
После этого опять лезем в свою папку и проверяем наши файлы, должно все работать нормально.
Если вам нужно разместить фильм на своей страничке, просто открываете исходник файла (у меня это morj.html) и копируем оттуда значения, вот эти:
Рис.28. копируем код и вставляем в свою страничку
А сейчас я вставлю этот код в эту страничку и смотрите, что получилось:
А? Каково? То-то же! Только смотрите, чтобы были файлы вместе и .swf и .fv, без которых проигрывание невозможно. Кстати, и звук там тоже есть. Можете включить и послушать.
И если я посмотрю размер swf файла, то он всего 33,5 кб. Это вместо 105 мегов!
Хотя... это не совсем правда. 33,5 кб весит только swf файл. А вот загружаемый одновременно .flv файл весит пусть не 105, а всего 10 мегов... пустячок, но приятно!
В общем, удачного просмотра и размещения ваших собственных файлов!
P.S. Спустя какое-то время после выхода моего урока ко мне обратился человек, который предложил более легкий способ. И дал ссылку на страничку, где можно скачать плейер. И даже не поленился все перевести! Зовут этого человека Анатолий, а вот его сайте, очень красивый - Antory. Так что полностью привожу его перевод!
Для установки плеера видео на страницу нужен сам плеер и javascript-файл, который разрешит браузеру internet explorer показывать флеш-приложение без всяких глупых вопросов. Скачать плеер можно по ссылке:
Там вам дадут сам плеер и примеры его использования. В принципе, можно разобрать, что там и сделать по-своему. Но мы не ищем легких путей. Итак, нам потребуется файл mediaplayer.swf и swfobject.js
Создаем новую html-страницу и пишем там, как обычно:
<HTML>
<HEAD>
<TITLE>my video</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Теперь надо подключить файл скрипта. Строка с ним выглядит так:
<p id="player1">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
var s1 = new SWFObject("mediaplayer.swf","single","320","260","7");
s1.addParam("allowfullscreen","true");
s1.addVariable("autostart","true");
s1.addVariable("file","video.flv");
s1.write("player1");
</script>
Он вставляется между тэгами <BODY></BODY>.
Да, совсем забыл, еще понадобится, собственно, само видео. В этом примере оно называется video.flv
Теперь, по порядку.
Первым делом идет код, говорящий вам, что в вашем браузере нету плагина для вопроизведения flash-приложений (если его нет. Если он установлен, вы не увидите это сообщение)
<p id="player1">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
Далее, заголовок javaскрипта и создание переменной плеера.
<script type="text/javascript">
&nsp; var s1 = new
указывается имя файла плеера (mediaplayer.swf), режим воспроизведения (single), размеры видеофайла (ширина и высота) и последняя цифра – версия плеера. Не знаю, для чего она, в моем браузере стоит версия 9 и все прекрасно работает.
Для правильного отображения видеофайла вам необходимо знать его размеры и указать их в вышеприведенной строке, притом, если вы хотите, чтобы элементы управления были видимы, к высоте видео надо прибавить еще 20 пикселей. Таким образом, для файла, с размерами 320х240, как видите, стоит 320 и 260 пикселей.
Следующие три строки присваивают дополнительные параметры плееру:
s1.addParam("allowfullscreen","true");
разрешает разворачивать видео на весь экран. (на панели управления есть для этого кнопочка). Если вам не нужна эта возможность, замените здесь “true” на “false”
s1.addVariable("autostart","true");
запускает воспроизведение сразу после загрузки. Если вы хотите, чтобы воспроизведение начиналось только после нажатия кнопки play, замените здесь “true” на “false”. В этом случае будет полезным добавить еще одну строку:
s1.addVariable("image","picture.jpg");
этот код помещает картинку (picture.jpg) в плеер, до начала воспроизведения.
s1.addVariable("file","video.flv");
этот параметр говорит плееру, где брать видеофайл.
Вот и все. Итоговый код страницы выгладит так:
<HTML>
<HEAD>
<TITLE>my video</TITLE>
<script type="text/javascript" src="swfobject.js"></script>
</HEAD>
<BODY>
<p id="player1">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
var s1 = new SWFObject("mediaplayer.swf","single","320","260","7");
s1.addParam("allowfullscreen","true");
s1.addVariable("autostart","true");
s1.addVariable("file","video.flv");
s1.write("player1");
</script>
</BODY>
</HTML>
