« назад напред »
Страници: [1]

Автор Тема: Поставяне на HTML5 Video Player в Web Страница  (Прочетена 3036 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

b13gadinkata

  • Newbie
  • *
  • Благодарности
  • -Казани: 14
  • -Получени: 0
  • Публикации: 44
Поставяне на HTML5 Video Player в Web Страница
« -: 15 Октомври 2012, 01:05:02 »
Здравейте сега ще ви покажа как да си сложите "Video Player" в Web страницата си!


Взимате този код :

Код: HTML
  1. <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  2. <script src="http://vjs.zencdn.net/c/video.js"></script>
  3.  

и го поставяте между тага "<head></head> :

Код: HTML
  2.     <head>
  3.         <title>Моят Сайт</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  6.         <script src="video-js/video.js"></script>
  7.     </head>
  8.     <body>
  9.  </body>
  10. </html>
  11.  

След това копирате този код,който е за самия "Player" :

Код: HTML
  1. <video controls="controls" preload="none"  loop="auto" width="1000" height="500" poster="images/bihdala.png">
  2. <source src="video/video_8.mp4" type='video/mp4'>
  3. <source src="video/video_8_VP8.webm" type="video/webm" />
  4.  

и го поставя между тага"<body></body> :

Код: HTML
  2.     <head>
  3.         <title>Моят Сайт</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  6.         <script src="video-js/video.js"></script>
  7.     </head>
  8.     <body>
  9. <video controls="controls" preload="none"  loop="auto" width="1000" height="500" poster="images/bihdala.png">
  10. <source src="video/video_8.mp4" type='video/mp4'>
  11. <source src="video/video_8_VP8.webm" type="video/webm" />
  12.  </body>
  13. </html>
  14.  

Да поясним за "playera" :

Код: HTML
  2. controls="controls"
  3. preload="none"    
  4. loop="auto"          
  5. width="1000"        
  6. height="500"        
  7. poster="images.png"> <!-- Ами направете го и ще разберете за какво е,че немога даго обясна -->
  8. <source src="video_8.mp4" type='video/mp4'>
  9. <source src="video_8_VP8.webm" type="video/webm" />
  11. <!-- Добавяне на контролите(бутоните),ако искате без контроли изтривате controls="controls -->
  12. <!-- Дави кажа и аз не знам за какво слижи според мен се превежда"презареждане" preload="none" -->
  13. <!-- Ако искате да се повтаря видеото оставете го така,ако ли не го изтрийте loop="auto" -->
  14.  <!-- Ширина на Видео Плеяра width -->
  15. <!-- Височина-Дължина на Видео Плеяра height -->
  16. <!-- Ами направете го и ще разберете за какво е,че немога даго обясна poster="images.png" -->
  17.  

Да поясним сега отделно за самия формат на Видеото :

Код: HTML
  1. Ред:1<source src="video_8.mp4" type='video/mp4'>
  2. Ред:2<source src="video_8_VP8.webm" type="video/webm" />
  3. <!-- Първиия  ред Оказва Самото Видео в кой формат е в момента е в формат "mp4" ,ако видеото е друг формат например"avi: променяме атрибута "type" ето така type='video/avi--!>
  4. <!--Втория ред е много важен без него видеото няма да тръгне,за тоя формат "webm" това е html5 документ :) Зада конвентирате видео формат в формат "webm" има два начина --!>
  5.  

1-ви начин :
Премахнат линк поради нарушение на правилата на форума!

2-рия начин който е по лесеин,ако си теглите клипчета от "youtobe" Цък
защо е по лесно,защото през тоя сайт можеш да си избереш в какъв формат да си запишеш видеото,"webm" , "mp4" , "3gp" :)

Да добавя още нещо което може и без него защото по трудно достъпно етого и него :

Код: HTML
  1. <source src="video_8_VP8.ogv" type="video/ogg" />
  2. <!--Този html5 формат "ogv" замества формат "webm" какво ще рече това сега ще ви покажа --!>
  3. <source src="video_8.mp4" type='video/mp4'>
  4. <source src="video_8_VP8.ogv" type="video/ogg" />
  5. <!--Ето това е,но ако сложите и трите формата пак ще работи--!>
  6. <source src="video_8.mp4" type='video/mp4'>
  7. <source src="video_8_VP8.webm" type="video/webm" />
  8. <source src="video_8_VP8.ogv" type="video/ogg" />
  9.  

1-ви вариант:
Код: HTML
  1. <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  2. <script src="video-js/video.js"></script>
  3.  

2-ри вариант:

Код: HTML
  1. <link href="video-js/video-js.css" rel="stylesheet">
  2. <script src="video-js/video-js/video.js"></script>
  3.  

Официален сайт Video-js

Това е от мен,ако нещо съм объркал правопис или нещо не ви е ясно пишете :)


Редактирано от Боровака. Прочети правилата и ги спазвай! Не толерираме използването на кракнат софтуер и линково към сайтове с нелегално съдържание.
За напред когато правиш уроци с помощта на готов продукт ( videojs в случая ), не прикачай сорса а давай линк към официалния сайт.


« Последна редакция: 15 Октомври 2012, 15:46:58 от b13gadinkata »
Активен

echeveria

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 72
  • -Получени: 94
  • Публикации: 4836
Re: Поставяне на HTML5 Video Player в Web Страница
« Отговор #1 -: 15 Октомври 2012, 10:58:20 »
Аз имам едно уточнение. Някой по стари версии на лисицата искат първият файл от горните за пускане да е техният (може и от някой добавки да е) Така че ако ви интересува пълна лисича поддръжка не е лошо първия формат след флаша да е лисичият.
Активен
Днес Печатарите използват парите за да купят мозъците на онези, които ги превъзхождат, за да ги накарат да им служат и така да се превърнат в жертва на посредствеността. Това ли е причината, поради която ги наричате благо?
<iframe src="http://www.corbindavenport.com/ubuntu/widget.html" style="width:

b13gadinkata

  • Newbie
  • *
  • Благодарности
  • -Казани: 14
  • -Получени: 0
  • Публикации: 44
Re: Поставяне на HTML5 Video Player в Web Страница
« Отговор #2 -: 15 Октомври 2012, 17:48:28 »
Може да съм направил урока но имам следния проблем моят сайт неми тръгват клипетата през "mozilata" през "googlechorme" и "opera" тръгват,но ако го отворя през моя localhost ми тръгва през "мозила" нямам реално ип,сайта съм го пуснал от на един приятел компа с реално ип :)
Активен
Страници: [1]
« назад напред »