Видео оруулах хуудсанд javascript болон флэш ашиглах
Хэзээ нэгэн цагт би HTML5 тусгайлан хийсэн видеоны хаягийг дурьдсан. Гэсэн хэдий ч харамсалтай нь шошгоны хэрэглээ ашиг тусыг хүртэхээс илүү таагүй байдалд хүргэдэг. Тиймээс та нэг видео форматаар бүрэн гүйцэд хийж болох арга замын талаар ярих болно.
Нэг төслийн хувьд би сайт дээр видеог үлээлгэх боломжийг олох хэрэгтэй болсон. Флэш тоглуулагчийг эхлүүлэх боломжгүй байсан (эхлэхийн тулд би хөгжүүлэлтийн орчин байхгүй, үүнийг хангаж чадаагүй), тиймээс флэш тоглуулагчийн нүүр царайнд тохирох нэр дэвшигчийг олж авах шаардлагатай байв. YouTube-ийн хэрэглэгчидийн ачаар энэ төрлийн тоглогчдод аялахад маш хялбар байдаг тул энэ нь маш төвөгтэй зүйл биш байсан;)
Сайтад байрладаг 2 нэр дэвшигч flv-mp3.com (uppod'a-ийн төсөл) болон flowplayer . Тэд тус бүрдээ жижиг боолтыг хийснээр хамгийн түрүүнд одоогийн галыг нийлүүлж буй хослолыг түргэн орхижээ. Цагийг харуулсан шиг, дотоод гэдсэнд би зөвшөөрөөгүй (хэдийгээр зарим хүмүүс vtyuhat flv-mp3.com руу орж чадсан юм).
Эхний сэтгэгдэл нь нэлээд мэхлэгддэг ба хамгийн бага ханасан төхөөрөмжид давуу эрх олгодог (ялангуяа эх хэлээрээ хэрэглэдэг бол). Энэ нь flv-mp3 дээр эрэлт хэрэгцээтэй байсан арга юм: үйлчилгээ нь тодорхой шинж чанар бүхий тоглуулагчийг "угсарна" боломжийг олгодог (энэ нь хэлбэр тоглох файл, дэлгэц амраагч, хэмжээ болон бусад зарим параметрийг харуулах) файлыг оруулах гаралтын кодыг аваарай. Тиймээ, энэ сонголт нь маш хэцүү санагдаж болох юм, ялангуяа html хүчтэй шулам, js гэхээсээ илүүтэйгээр хүмүүсийг бодолцох хэрэгтэй.
Зөвхөн сайт дээр байнга "тоглох" урам зоригийг бий болгох тал дээр видеог байнга хийдэг. Үүнээс гадна, та бүх тохиргоог судалж, сервер хэлээр дамжуулан автоматжуулна. гэхдээ энэ зарчим гажуудал гэж нэрлэгдэх болно (YouTube дээр видеог ачаалах нь хялбар бөгөөд татан авахад бэлэн кодыг авах нь илүү хялбар байдаг).
Энд бид мэргэн бууч гэж нэрлэгдэх нэгэн зүйл болох юм. чи javascript ид шидийг ойлгохыг хүсч байна уу? Энэ нь тийм ч хэцүү биш (байгуулагчийг ашиглахаас илүү хялбар) гэдгийг би харуулах болно. Энэ урсгагч тоглуулагчийн тусламжтай туслах. Та хувилбарыг сонгож болно Эндээс , гэхдээ GPL3-д хуваарилагдсан хамгийн анхны хувилбар нь таны сайтанд тохирсон.
Тоглогч дараах контентыг тоглуулахыг дэмждэг: flv, mp4, m4v (images for 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 ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>
Тоглогчийн ID-тэй байгаа div элемент нь видеог задлахгүй байх контейнер юм. Хоёр дахь мөрөнд javascript файл холболт байна. Гаралтын үр дүн нь 3 функцийг дамжуулдаг нэг функцийг ажиллуулагч ()
- Видео тоглуулах ёстой элементийн ID;
- тоглогч руу орох зам (тоглогчдод зориулагдсан бөгөөд автоматаар ачаалах хяналтууд биш);
- Зарим нэмэлт параметрүүд.
Үүнээс гадна, танигчаас гадна объект эсвэл сонгон шалгаруулагчийн лавлахыг шууд дамжуулж болно.
Дээрх код нь юу ч харуулахгүй, гэхдээ энэ нь урсгагч тоглуулагчийг хуудас руу хэрхэн холбохыг хялбарчилдаг. Видео гарахын тулд та гуравдахь параметрийг үүсгэх хэрэгтэй бөгөөд энэ нь бас хялбар юм.
Энгийн: гурав дахь параметр (config) нь дараах элементүүдийг тодорхойлж болох харьяа массив юм:
- Жишээ нь, та автоматаар буферинг (autoBuffering) эсвэл тоглуулах (autoPlay) эхлэхийг хүсч байгаа эсэх, агуулгыг хэрхэн хувиарлахыг хүсч байгаа бол "бүтээх" глобал тохиргоог хийж болно (тохирох утга бүхий масштаб нь анхны талбайн харьцааг хэвээр байлгаж, хэвийн видеог ашиглах болно) магадгүй зөвхөн). Та мөн тоглож буй файлыг (url) зааж өгч болно, мөн үйл явдлыг түр зогсоох (жишээлбэл, киног тоглох үед тоглож эхлэх функцүүд);
- Тоглуулах жагсаалт нь жирийн массив (жагсаалт) юм. элемент бүр нь мөр байж болно (энэ тохиолдолд мөр нь тоглуулах клипийн хаяг), эсвэл харгалзах массив. Хоёр дахь тохиолдолд, өгөгдлийн олонлог нь өмнөх зүйлээсээ хавчуургатай төстэй өгөгдлөөр тогтоогддог, өөрөөр хэлбэл буферыг ашиглах, эхлэх, ашиглах гэх мэтийг зааж өгч болно;
- залгаасууд - стандарт функцуудыг өргөтгөхөд тусалдаг. Онцлогуудын нэг нь тухайн цэг дээр интерфэйсийг зөв бичих чадвар юм.
Одоо боломжуудыг харуулсан жижиг жишээ бол:
<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: false, autoBuffering: false, scaling 'fit'}, тоглуулах жагсаалт: [{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 ', тоглуулах жагсаалт: хуурамч , // буцах товчийг устгах: үнэн, // зогсоох товчлуур scrubber: видеог гулгах жинхэнэ // буруу тоонууд}}}); </ script>
Үзүүлсэн код нь дараах тохиргоог хийж өгдөг: автоматаар эхлэх тоглуулах, автоматаар буферлэх, идэвхгүйжүүлэлтийг идэвхгүй болгох цонхыг тохируулах боломжтой. Тоглуулах боломжтой файл болгон зураг болон видеог ашигладаг бөгөөд зурагны тохиргоог өөрчлөх боломжтой (автоматаар дуудагдах хэрэгтэй). Зураг дээр (эсвэл тоглуулах товч) дээр дарахад видео харагдана. Бүх зүйл маш энгийн байдаг. Хэрэв та өөр видео клип нэмэх бол коммандаар тусгаарлагдсан тоглуулах жагсаалтанд шинэ зүйл нэмнэ үү. хэрэв тоглуулах жагсаалтыг автоматаар тоглуулах шаардлагатай бол ашиатив массивын клипийг тохируулах үед autoPlay утга нь үнэн байна.
api функц агуулсан баримт бичиг байгаа болно энд байна . Хэрэв хэн нэгэн англи хэлийг ойлгохгүй бол энэ нь хамаагүй юм. Дээрх кодыг задлан шинжилсний дараа юуны түрүүнд юу байгааг ойлгох боломжтой. Би маш сайн зөвлөж байна, яагаад гэвэл эрэлт хэрэгцээтэй "тохиргоо" байх болно.
Жишээ нь энд харна уу . Эх кодыг харахыг бүү март (Ctrl + U)
Хэвлэгч
Офлайн 1 долоо хоног
x64 (бас ба)
Сэтгэгдэл: 2842 Нийтлэл: 395 Бүртгэл: 02-04-2009
И javascript ид шидийг ойлгохыг хүсч байна уу?