Umieszczenie na podstronie krótkiego filmiku w podanym obszarze diva o rozdzielczości 640x360.

Question

Chciałbym umieścić na podstronie 20-minutowy filmik, który byłby ulokowany w podanym obszarze o rozdzielczości 640x360. Np. na youtubie klikamy na wybrany filmik i odtwarzamy go prawdopodobnie o rozdzielczości 640x360 z możliwością oglądania na pełnym ekranie.

Biorę pod uwagę taki kod:

<div id="topbar">
	<embed src="filmik.avi" autostart="false" />
</div>

"false" - plik nie zostanie odtworzony po wczytaniu (trzeba go uruchomić "ręcznie" - poprzez wyświetlony panel kontrolny).

Aktualnie taki mam kod:

<div id="topbar">

</div>

#topbar
{
	background-color: #008080;
	padding: 5px;
	margin-left: 237px;
	margin-top: 30px;
	margin-bottom: 20px;
	width: 640px;
	min-height: 360px;
}

Co należy wpisać w kodzie, aby po kliknięciu na ten podany obszar o rozdzielczości 640x360, można było odtworzyć filmik?

Answer 1

Obecnie przeglądarki obsługują tag `<video>` który powinien być lepszy od `embed`. Można tam dodać parametr controls aby wyświetlało panel konstrolny `<video src="..." control />`.

Jeśli chcesz odtwarzać film o rozdzielczości `640x360` to najlepiej wygeneruj plik o takiej wielkości aby przeglądarka nie musiała czytać z serwera nadmiarowych danych, które i tak nie wyświetla. Będzie miała mniej do ściągania i nie będzie musiała przeliczać każdej klatki obrazu do takiej wielkości.

Comments

Dla testu wpisałem taki kod:

<div id="topbar">
	<video autoplay>
		<source src="filmik.avi" type="video/avi">
	</video>
</div>

ale nie działa.

Gdzie mam wpisać rozdzielczość?

---

Podejrzewam, że nie przeczyta formatu AVI.

Pewnie czyta tylko format MP4, OGG i WEBM.

Co zrobić, aby nie konwertować tego filmiku do któregoś z tych 3 formatów?

---

http://www.w3schools.com/tags/att_video_width.asp

<video width="640" height="360" autoplay>

A jak chcesz ustawić to prze CSS to nadaj temu tagowi `id`

---

Jeśli nie chcesz konwertować to zostaje Ci użyć gotowy player, które w razie problemu użyje player napisany we Flashu. np. http://videojs.com/ https://www.jwplayer.com/

 

Tylko obecnie Flash coraz bardziej odchodzi w zapomnienie - niektóre przeglądarki ze względu na odkryte dziury domyślnie mają zablokowane uruchamianie Flasha.

Różne przeglądarki odtwarzają różne formaty (a przynajmniej dawniej tak było). Jedne otwarzały tylko WEBM a inne tylko MP4 tak więc trzeba było przygotowywać wszystkie formaty (ręcznie lub przygotować sobie skrypt, który to robił za nas).

---

Wszystko pięknie i ładnie, ale brakuje odtworzenia w AVI.

 

Tylko nie pisz mi, że muszę ten filmik konwertować na format MP4, OGG albo WEBM ?

Answer 2

do <embed src="filmik.avi" autostart="false" /> w drugiej linijce dodaj takie coś żeby to tak wyglądało : <embed src="filmik.avi" autostart="false" width="640" height="360"/> powinno działać :)