Streszczenie

W tym artykule omówimy kluczowe punkty na temat HTML5 i jego wpływ na media w krajobrazie tworzenia stron internetowych. HTML5 to najnowsza wersja specyfikacji HTML i wprowadza znaczące zmiany i ulepszenia w Internecie. Zapewnia standardowy sposób odtwarzania mediów bez potrzeby wtyczek przeglądarki. Jednak HTML5 jest nadal w toku, a obsługa przeglądarki dla swoich funkcji może się różnić.

Kluczowe punkty:

HTML5 to pierwsza nowa wersja specyfikacji HTML od 1999 roku.
HTML5 będzie nowym standardem dla HTML, XHTML i HTML DOM.
HTML5 zapewnia standardowy sposób odtwarzania mediów bez wtyczek przeglądarki.
Większość współczesnych przeglądarek ma pewien poziom obsługi tagów HTML5.
HTML5 jest realną alternatywą dla Flash w odtwarzaniu mediów.
Tag wideo HTML5 oferuje znormalizowane podejście do odtwarzania filmów.
HTML5 obsługuje różne formaty multimediów, w tym AAC, MP3, OGG Vorbis, OGG Theora, WebM i MPEG-4.
Obsługa przeglądarki dla formatów medialnych może się różnić.
Tag wideo w HTML5 pozwala na konfigurowalne elementy sterowania odtwarzaniem.
Tag wideo obsługuje właściwości, takie jak automatyczna, pętla i plakat.

Pytania i odpowiedzi

P: Co to jest HTML5?

HTML5 to najnowsza wersja specyfikacji HTML, która wprowadza nowe funkcje i ulepszenia do tworzenia stron internetowych.

P: Jakie jest znaczenie HTML5 w odtwarzaniu mediów?

HTML5 zapewnia standardowy sposób odtwarzania mediów bez potrzeby wtyczek przeglądarki, dzięki czemu jest bardziej dostępny i spójny na różnych platformach.

P: W jaki sposób znacznik wideo HTML5 różni się od znacznika obiektu do odtwarzania multimediów?

Tag wideo HTML5 to znormalizowane podejście do odtwarzania filmów, zapewniając kompatybilność w przeglądarkach bez potrzeby określonych wtyczek.

P: Jakie są obsługiwane formaty mediów w HTML5?

HTML5 obsługuje AAC, MP3, OGG Vorbis, OGG Theora, WebM i MPEG-4 dla audio i wideo.

P: Czy każda przeglądarka obsługuje wszystkie formaty multimedialne HTML5?

Nie, obsługa przeglądarki dla formatów multimediów może się różnić. Ważne jest, aby wziąć pod uwagę zgodność formatów mediów podczas opracowywania aplikacji HTML5.

P: Jakie są zalety korzystania z znacznika wideo w HTML5?

Tag wideo w HTML5 umożliwia konfigurowalne elementy sterowania odtwarzaniem i zapewnia znormalizowany sposób odtwarzania filmów w różnych przeglądarkach.

P: Jakie właściwości można użyć z tagiem wideo?

Tag wideo obsługuje właściwości, takie jak automatyczna, pętla, elementy sterujące, wysokość i obciążenie wstępne.

P: Jak mogę użyć znacznika wideo na stronie HTML5?

Aby odtworzyć wideo na stronie HTML5, wystarczy użyć znacznika wideo i ustaw atrybut źródłowy, aby określić pliki wideo.

P: Jaki jest obecny stan implementacji HTML5 w przeglądarkach?

Większość współczesnych przeglądarek ma pewien poziom wsparcia dla funkcji HTML5. Ważne jest jednak rozważenie kompatybilności przeglądarki przy użyciu określonych tagów i funkcji HTML5.

P: Czy html5 jest zamiennikiem lampy błyskowej?

HTML5 stanowi alternatywę dla flashu do odtwarzania multimediów, ale nie jest to kompletny zamiennik. Flash nadal ma szerszą obsługę przeglądarki i oferuje dodatkowe funkcje.

Pobierz HTML 5 dla Windows 10 – Najlepsze oprogramowanie i aplikacje

Możesz ustawić właściwości w HTML lub JavaScript. Poniższy kod pokazuje, jak ustawić właściwość Boolean Controls w HTML i JavaScript.

HTML5 – Praca z mediami w HTML5

Chyba że mieszkasz na odległej wyspie przez ostatni rok, prawdopodobnie słyszałeś szum i szum wokół HTML5. Nie, HTML5 nie wyleczy większości chorób, ani nie będzie zakończyć głodu świata, ale jest gotowe przekształcić bogaty krajobraz aplikacji internetowych. Z całym szumem nad nowym standardem HTML, ważne jest, aby sprowadzić dyskusję z powrotem na Ziemię. Oto ważne fakty, które musisz wiedzieć o tej nowej specyfikacji HTML:

HTML5 to pierwsza nowa wersja specyfikacji od 1999 roku – od tego czasu sieć bardzo się zmieniła.
HTML5 będzie nowym standardem dla HTML, XHTML i HTML DOM.
HTML5 zapewnia standardowy sposób odtwarzania mediów-kluczowa korzyść, ponieważ nie było standardu odtwarzania mediów na stronie internetowej bez wtyczki przeglądarki i nie ma gwarancji, że każda przeglądarka obsługuje wtyczkę.
HTML5 jest nadal w toku, ale większość nowoczesnych przeglądarek ma wsparcie tagów HTML5.

Kiedy Silverlight 1.0 wysłane w 2007 roku, Microsoft reklamował swój film i odtwarzanie audio jako główne funkcje, a główny powód, aby postrzegać Silverlight jako alternatywę dla Flash – który jest obsługiwany w jednej lub innej wersji na 95 procent przeglądarków na całym świecie. W tym czasie Silverlight jest wspierany na około 75 procentach przeglądarek na całym świecie lub około trzech na cztery komputery. Ale jeśli ty’Szukam odtwarzania mediów, a ty nie’T chcę mieć problem lub zależność wtyczki, HTML5 jest odpowiedzią.

Aby zobaczyć różnicę między użyciem znacznika wideo HTML5 a tradycyjnym znacznikiem obiektu do odtwarzania mediów, rozważ przykład w Rysunek 1.

Rysunek 1 Tag wideo HTML vs. Tag obiektowy do odtwarzania mediów

 Za pomocą tagu wideo HTML5 do odtwarzania wideo
 
 Za pomocą znacznika obiektu do odtwarzania nośników za pomocą wtyczki Flash

Więc co’S wielka sprawa? Oba przykłady są proste i łatwe do wdrożenia. Ale ważne jest to, że ponieważ tag jest standardem, nie będzie wątpliwości, że należy go używać do odtwarzania mediów. Jesteś skończony’T muszę zgadywać, czy przeglądarka ma określoną wersję konkretnej wtyczki zainstalowanej do odtwarzania multimediów. Część standardowa jest czym’S brakowało w HTML.

Obsługiwane formaty medialne w HTML5

Aby korzystać z mediów w następnej aplikacji HTML5, musisz wiedzieć, jakie formaty są obsługiwane. HTML5 obsługuje AAC, MP3 i OGG Vorbis dla audio i OGG Theora, WebM i MPEG-4 dla wideo.

Mimo że HTML5 obsługuje te formaty medialne, nie każda przeglądarka obsługuje każdy format. Rysunek 2 pokazuje aktualne przeglądarki i obsługujące formaty medialne.

Rysunek 2 Obsługa mediów w obecnych przeglądarkach

Przeglądarka	Formaty wideo			Formaty dźwiękowe
OGG Theora	H.264	VP8 (webm)	Ogg Vorbis	MP3	WAV
Internet Explorer	Instalacja ręczna	9.0	Instalacja ręczna	NIE	Tak	NIE
Mozilla Firefox	3.5	NIE	4.0	Tak	NIE	Tak
Google Chrome	3.0	NIE	6.0	Tak	Tak	Tak
Safari	Instalacja ręczna	3	Instalacja ręczna	NIE	Tak	Tak
Opera	10.50	NIE	10.60	Tak	NIE	Tak

Za pomocą znacznika wideo

Aby odtworzyć wideo na stronie HTML5, po prostu użyj znacznika, jak pokazano tutaj:

Atrybut src (https: // www.W3.ORG/TR/2013/CR-HTML5-20130806/Embedded-Content-0.html#-videoelement) ustawia nazwę lub nazwy filmu do odtwarzania, a także sterowanie’s boolean przełącznik decyduje o tym, czy domyślne elementy sterujące odtwarzaniem wyświetlają. Możesz także użyć dwóch innych właściwości logicznych – użytkowania i pętli – po konfigurowaniu znacznika wideo. Rysunek 3 wymienia każdy atrybut właściwości i jej wartość.

Rysunek 3 Właściwości tagów wideo

Atrybut	Wartość	Opis
Audio	Wyciszone	Definiuje domyślny stan dźwięku. Obecnie dozwolone jest tylko wyciszone.
Automatyczne odtwarzanie	Automatyczne odtwarzanie	Jeśli jest obecny, wideo zaczyna odtwarzać tak szybko’S Gotowy.
Sterownica	Sterownica	Dodaje elementy sterujące odtwarzanie, pauza i głośność.
Wysokość	Piksele	Ustawia wysokość odtwarzacza wideo.
Pętla	Pętla	Jeśli jest obecny, wideo rozpocznie się od nowa za każdym razem, gdy się kończy.
Plakat	URL	Określa adres URL obrazu reprezentującego wideo.
Ładunek wstępny	Ładunek wstępny	Jeśli jest obecny, wideo jest ładowane na obciążenie strony i jest gotowe do uruchomienia. Jest ignorowany, jeśli jest obecna autooduplacja.
Src	URL	URL filmu do odtwarzania.
Szerokość	Piksele	Ustawia szerokość odtwarzacza wideo.

Poniższy kod pokazuje kilka kluczowych właściwości odtwarzacza wideo we wspólnym scenariuszu, który obejmuje ustawienie właściwości wysokości i szerokości, automatycznej oprawy, pętli i kontroli, które wyświetlą element gry, pauzę i objętość, a także komunikat o błędzie wypadku.

Możesz także ustawić określone typowanie MIME atrybut typu i kodek w elemencie źródłowym. Te przykłady używają atrybutu typu, aby ustawić typ MIME i kodowanie mediów:

Możesz ustawić właściwości w HTML lub JavaScript. Poniższy kod pokazuje, jak ustawić właściwość Boolean Controls w HTML i JavaScript.

    // 2 sposoby wyświetlania sterowania w JavaScript Video.Controls = True; wideo.setAttribute (&bdquo;Controls&rdquo;, &bdquo;Controls&rdquo;);

Kiedy nie masz’Nie wiem, czy przeglądarka renderuje stronę, potrzebujesz mechanizmu awarii do odtwarzania mediów. Wszystko, co robisz, to wymienić formaty wideo, w których renderowałeś swój film, a przeglądarka gra pierwszą, którą obsługuje. Możesz także dodać tekst jako ostateczność, aby poinformować użytkownika, że używana przeglądarka’T Wsparcie natywnego odtwarzania wideo HTML5 wideo. Poniższy kod zawiera wiele źródeł wideo, a także komunikat o awarii wskazujący bez obsługi HTML5.

Jeśli chcesz upewnić się, że gra wideo, możesz dołączyć znacznik obiektu, aby odtwarzać również wersję flash, na przykład:

Możesz także użyć JavaScript, aby sprawdzić, czy format wideo jest obsługiwany, sprawdzając właściwość CanplayType, w następujący sposób:

var wideo = dokument.getElementsBaTagname (&bdquo;video&rdquo;) [0]; if (wideo.canplaytype) < // video tag supported if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) < // it may be able to play>w przeciwnym razie >

Jeśli chcesz zrobić coś bardziej ekspresyjnego niż prosty tekst oddechowy, możesz użyć słuchacza zdarzeń OneRor, aby przekazać błąd do:

Korzystając z właściwości plakatu, możesz określić adres URL obrazu, który wyświetli się zamiast wideo na formularzu. Zwykle ty’Ponowne wyświetlanie listy filmów lub pojedynczego filmu na formularzu, więc posiadanie łatwego sposobu pokazania podglądu filmu w formie obrazu zapewnia lepsze wrażenia użytkownika. Oto właściwość plakatu w akcji:

Wreszcie, używając odrobiny JavaScript i Basic HTML, możesz utworzyć bardziej interaktywny odtwarzacz wideo. Rysunek 4 pokazuje, jak dodać odtwarzacz wideo do formularza z JavaScript i jak odpowiedzieć na dane wejściowe użytkownika na kontrolę.

Rycina 4 Interakcja z wideo w JavaScript

var wideo = dokument.CreateElement (&bdquo;wideo”); wideo.src = ‘video1.MP4 ‘; wideo.Controls = True; dokument.ciało.appendchild (wideo); var wideo = new video (); wideo.src = ‘video1.MP4 ‘; var wideo = nowy wideo (&bdquo;wideo1.MP4 ‘)

Aby uzyskać pełną listę zdarzeń i możliwości odtwarzania wideo, sprawdź tę sekcję specyfikacji na https: // www.W3.org/tr/html-markup/wideo.html.

Za pomocą znacznika audio

Korzystanie z znacznika audio przypomina użycie znacznika wideo: przekazujesz jeden lub więcej plików audio do sterowania, a pierwsza obsługa przeglądarki jest.

Rysunek 5 Wymienia właściwości dostępne w znaczniku audio. Kontrola nie’T musi wyświetlać jak odtwarzacz wideo, więc właściwości takie jak wysokość, szerokość i plakat nie są uwzględnione.

Rysunek 5 Właściwości tagów audio

Atrybut	Wartość	Opis
Automatyczne odtwarzanie	Automatyczne odtwarzanie	Jeśli jest obecny, dźwięk zaczyna grać tak szybko’S Gotowy.
Sterownica	sterownica	Wyświetlane są elementy sterujące, takie jak przycisk odtwarzania.
Pętla	pętla	Jeśli jest obecny, dźwięk zaczyna odtwarzać ponownie (zapętlanie), gdy osiągnie koniec.
Ładunek wstępny	ładunek wstępny	Jeśli jest obecny, dźwięk jest ładowany na obciążenie strony i jest gotowy do uruchomienia. To’s ignorowany, jeśli jest obecna automatyczna.
Src	URL	URL dźwięku do gry.

Podobnie jak w przypadku znacznika wideo, możesz przekazać wiele plików do znacznika audio, a pierwszy obsługiwany będzie odtwarzany. Możesz także użyć wiadomości o awarii, gdy przeglądarka’T Obsługuj tag audio, jak to:

Streszczenie

HTML5 jest kolejnym standardem dla Internetu i w zależności od przeglądarek’ponownie celowanie, możesz zacząć używać niektórych nowych tagów, takich jak audio i wideo, teraz. Bądź jednak ostrożny podczas korzystania z HTML5, ponieważ nie każda przeglądarka obsługuje nowe tagi, a nawet jeśli tak, może nie obsługiwać każdego formatu mediów. Jeśli ty’Przy użyciu nowoczesnej przeglądarki, która obsługuje HTML5, nadal musisz wykonać dodatkową pracę, aby przetworzyć media we wszystkich formatach, aby zapewnić sukces użytkownika. Oto kilka świetnych zasobów internetowych, które dostarczają informacji o wsparciu przeglądarki, a także wszystkie inne informacje, których potrzebujesz, aby zapewnić sukces mediów HTML5:

https: // www.W3.org/tr/html-markup/wideo.html
https: // dev.W3.ORG/HTML5/Spec/Omówienie.html
https: // www.W3Schools.com/html/html5_intro.żmija
https: // html5test.com/
https: // caniuse.com/

_Jason Beres jest wiceprezesem ds. Zarządzania produktami, społeczności i ewangelizacji w Infragistics and Leadzi kierowanymi przez klientów, innowacyjne funkcje i funkcjonalność we wszystkich produktach Infragistics. Jason to Microsoft .Net MVP i jest aktywnym członkiem .Społeczność netto. Mówi co roku podczas dziesiątek wydarzeń i konferencji na całym świecie. Jest autorem ośmiu książek na tematy, od Visual Basic i C# po SQL Server i Silverlight; Jego najnowszy jest profesjonalny Silverlight 4 (Wrox, 2010). Możesz dotrzeć do Jason w [email protected] lub na Twitterze @jasonberes._

Pobierz HTML 5 dla Windows 10 – Najlepsze oprogramowanie i aplikacje

Internet Explorer 9 to bezpłatna przeglądarka internetowa dla komputerów i laptopów komputerowych Microsoft Windows. Opracowany i opublikowany przez Microsoft, IE 9 jest kompatybilny.

Okna
przeglądarka
Przeglądarka dla systemu Windows
Przeglądarka dla Windows 10
Przeglądarka dla systemu Windows 7
CSS3