Видео на сайте
Недавно столкнулась с проблемой установки видео на сайте. Оказалось не такой простой задачей. Обычно файлы видео очень велики. Просто разместить их на сайте простой ссылкой хоть и работало, но не нравилось и то, что открывается сторонним плейером, а мне нужно было и чтобы весил мало и чтобы проигрывалось в том месте странички, где хотелось, и чтобы проигрывалось не просто при загрузке странички, а именно, когда пользователь нажмет на кнопку.
Мучалась без малого две недели. Перерыла все учебники, прочесала весь интернет, ничегошеньки не нашла! Пришлось включить свои мозги и думать этими самыми мозгами. Думаю, мой опыт пригодится многим. Так что радуйтесь, я опять с вами, а вы опять со мной. А значит, все мы вместе.
Если найдете лучший способ - пишите, пусть люди будут счастливы!
Была я недавно в Московском зоопарке. Попала в дельфинарий. Представляете - в зоопарке выступают дельфины, моржи, киты... Это меня так поразило, что все это я быстренько засняла на видео и решила представить миру. И хотя снимала частями выступления, все равно файлы получились большими.
Тут я решила продемонстрировать ролик про моржа. Сам этот ролик включает и выступления и моржа и белого кита. Весит этот мувик 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-страницу и пишем там, как обычно:
Теперь надо подключить файл скрипта. Строка с ним выглядит так:
Вставлять ее надо после тэга </TITLE>.
Теперь сам код плеера:
Он вставляется между тэгами <BODY></BODY>.
Да, совсем забыл, еще понадобится, собственно, само видео. В этом примере оно называется video.flv
Теперь, по порядку.
Первым делом идет код, говорящий вам, что в вашем браузере нету плагина для вопроизведения flash-приложений (если его нет. Если он установлен, вы не увидите это сообщение)
Далее, заголовок javaскрипта и создание переменной плеера.
Теперь самое интересное. В строке:
указывается имя файла плеера (mediaplayer.swf), режим воспроизведения (single), размеры видеофайла (ширина и высота) и последняя цифра – версия плеера. Не знаю, для чего она, в моем браузере стоит версия 9 и все прекрасно работает.
Для правильного отображения видеофайла вам необходимо знать его размеры и указать их в вышеприведенной строке, притом, если вы хотите, чтобы элементы управления были видимы, к высоте видео надо прибавить еще 20 пикселей. Таким образом, для файла, с размерами 320х240, как видите, стоит 320 и 260 пикселей.
Следующие три строки присваивают дополнительные параметры плееру:
разрешает разворачивать видео на весь экран. (на панели управления есть для этого кнопочка). Если вам не нужна эта возможность, замените здесь “true” на “false”
запускает воспроизведение сразу после загрузки. Если вы хотите, чтобы воспроизведение начиналось только после нажатия кнопки play, замените здесь “true” на “false”. В этом случае будет полезным добавить еще одну строку:
этот код помещает картинку (picture.jpg) в плеер, до начала воспроизведения.
этот параметр говорит плееру, где брать видеофайл.
Вот и все. Итоговый код страницы выгладит так:
Видео на сайт от Михаэля
Однако Михаэль представил еще один вариант вставки видео на сайт. Попробуйте!
Доброго времени суток. Решил поделиться с Вами как можно легко добавлять видео к себе на сайт через видеохостинг RuTube.ru Первое что необходимо сделать, это зарегистрироваться на сайте . После этого авторизуемся и идем по и жмем "получить код".
Теперь сделаем альбом, что бы в него загружать видео. Идем и создаем новый альбом. и СТАВИМ галку "Показывать на сайте" (если ее не поставить, видео из этого альбома не будут видны).
Для начала сделаем возможность загружать видео с вашего сайта. Для этого делаем страничку например upload.php (можно и html). и вставляем код в нужное место (туда где хотите чтоб бы отображалась форма).
в строке rt_developer_key = "код"; поставьте код который получили ранее вместо код.
rt_redirect_ok = "view_video.html"; - эта строка указывает на какую страницу будет перенаправлен скрипт после загрузки, с параметром rt_movie_id который передает id загруженного Вами видео. Сделаем так что после загрузки, будет отображаться это видео сразу.
rt_playlists_as_categories='1'; - эта строка включает список альбомов, что бы можно было загрузить в Ваш альбом и отображать на сайте.
В принципе с загрузкой все (это минимум того что можно сделать, можно например записать rt_movie_id и логин того кто загрузил в БД для хранения, но и без этого АПИ рутуба работает на ура).
Теперь сделаем вывод всех видео в альбоме.
Создаем страницу view_video.php. Я сделаю страницу c минимум php, что бы не делать несколько страниц под вывод альбомов и самого видео.
Ставим этот код, где Вы хотите показывать список видео и само видео:
Первая часть до }else{ выводит список видео из указанного альбома.
rt_playlist_id='367688'; - этот параметр указывает на № альбома, узнать этот номер можно зайдя в альбомы и выбрав нужный альбом, будет ссылка вида:
http://rutube.ru/journal/playlist.html?id=367705 то что стоит после id= это и есть то что нам нужно.
Второй кусок, выполняется когда мы нажимаем в списке альбома на любое видео.
Там есть функция function rt_show_movie(t) она нужна для формирования своего вида вывода информации, если ее убрать, то будет показываться информация по умолчанию (кто загрузил, когда, ссылки на вставку на другие сайты). Как формировать свой вывод данных, написано тут:
Вот вроде и все для быстрого встраивания видео в Ваш портал. Но конечно это не все что предлагает RuTube.ru для работы с видео, на этой странице (http://rutube.ru/partners/code.html) Вы найдете еще другие дополнительные коды, которые можно встроить на страницы.
Боюсь что не все сразу "въедут" в урок, но я постараюсь ответить тут на вопросы если они будут.
(В. Ахметязнова, 2005 г)