2010-02-16 8 views
32

Zakładając następujące:Czy można używać identyfikatorów URI danych w tagach wideo i audio?

  1. przeglądarce mowa nie ogranicza rozmiaru URI danych.
  2. W rzeczywistości jest cel, aby to zrobić (więc proszę powstrzymać się od pytania "o co chodzi?" I "zdajesz sobie sprawę, że kodowanie base64 rozszerzy twój plik o 33%, prawda?").

Czy to technicznie możliwe kodować cały plik wideo lub audio do base64 i osadzić go w dokumencie HTML przy użyciu dźwięku > lub < <wideo>?

+0

Nieprawidłowy. Przeglądarka ogranicza rozmiar identyfikatora URI "data:". Opera ogranicza je do 4K; IE8 ogranicza je do 32K. – SLaks

+13

Źle mnie zrozumiałeś. Miałem na myśli ZAPOMINAĆ o tym, że niektóre przeglądarki ograniczają rozmiar identyfikatorów URI danych. –

+3

@SLaks: Aktualne wersje Opery mogą z pewnością obsługiwać identyfikatory URI większe niż 4 KB. Udało mi się otworzyć dane 1,3 MB: URI w 10.5. – Kornel

Odpowiedz

5

Powinno być możliwe, z wyjątkiem IE8 i poniżej, które nie obsługuje elementów audio/wideo. Należy pamiętać, że Opera ogranicza rozmiar identyfikatora URI.

+0

Czy znasz jakiś przykład tego na wolności? Jestem ciekawa, jak to wypróbować. –

+0

Nie, nie znam żadnych. – SLaks

+4

Prawdopodobnie powinienem sam tego wypróbować =) Wygląda na to, że działa w Chrome, ale nie jestem pewien innych przeglądarek. Dzięki. –

7

IE9 obsługuje to, ale tylko dla obsługiwanych formatów plików. Na przykład działa dla plików MP3, ale nie będzie działać dla plików WAV. Próbowaliśmy http://www.themaninblue.com/experiment/JS-909/ i następujący test:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay"> 
    <source src="data:audio/wav;base64,UklGRhwMAABXQVZFZm10IBAAAAABAAEAgD4AAIA+AAABAAgAZGF0Ya4LAACAgICAgICAgICAgICAgICAgICAgICAgICAf3hxeH+AfXZ1eHx6dnR5fYGFgoOKi42aloubq6GOjI2Op7ythXJ0eYF5aV1AOFFib32HmZSHhpCalIiYi4SRkZaLfnhxaWptb21qaWBea2BRYmZTVmFgWFNXVVVhaGdbYGhZbXh1gXZ1goeIlot1k6yxtKaOkaWhq7KonKCZoaCjoKWuqqmurK6ztrO7tbTAvru/vb68vbW6vLGqsLOfm5yal5KKhoyBeHt2dXBnbmljVlJWUEBBPDw9Mi4zKRwhIBYaGRQcHBURGB0XFxwhGxocJSstMjg6PTc6PUxVV1lWV2JqaXN0coCHhIyPjpOenqWppK6xu72yxMu9us7Pw83Wy9nY29ve6OPr6uvs6ezu6ejk6erm3uPj3dbT1sjBzdDFuMHAt7m1r7W6qaCupJOTkpWPgHqAd3JrbGlnY1peX1hTUk9PTFRKR0RFQkRBRUVEQkdBPjs9Pzo6NT04Njs+PTxAPzo/Ojk6PEA5PUJAQD04PkRCREZLUk1KT1BRUVdXU1VRV1tZV1xgXltcXF9hXl9eY2VmZmlna3J0b3F3eHyBfX+JgIWJiouTlZCTmpybnqSgnqyrqrO3srK2uL2/u7jAwMLFxsfEv8XLzcrIy83JzcrP0s3M0dTP0drY1dPR1dzc19za19XX2dnU1NjU0dXPzdHQy8rMysfGxMLBvLu3ta+sraeioJ2YlI+MioeFfX55cnJsaWVjXVlbVE5RTktHRUVAPDw3NC8uLyknKSIiJiUdHiEeGx4eHRwZHB8cHiAfHh8eHSEhISMoJyMnKisrLCszNy8yOTg9QEJFRUVITVFOTlJVWltaXmNfX2ZqZ21xb3R3eHqAhoeJkZKTlZmhpJ6kqKeur6yxtLW1trW4t6+us7axrbK2tLa6ury7u7u9u7vCwb+/vr7Ev7y9v8G8vby6vru4uLq+tri8ubi5t7W4uLW5uLKxs7G0tLGwt7Wvs7avr7O0tLW4trS4uLO1trW1trm1tLm0r7Kyr66wramsqaKlp52bmpeWl5KQkImEhIB8fXh3eHJrbW5mYGNcWFhUUE1LRENDQUI9ODcxLy8vMCsqLCgoKCgpKScoKCYoKygpKyssLi0sLi0uMDIwMTIuLzQ0Njg4Njc8ODlBQ0A/RUdGSU5RUVFUV1pdXWFjZGdpbG1vcXJ2eXh6fICAgIWIio2OkJGSlJWanJqbnZ2cn6Kkp6enq62srbCysrO1uLy4uL+/vL7CwMHAvb/Cvbq9vLm5uba2t7Sysq+urqyqqaalpqShoJ+enZuamZqXlZWTkpGSkpCNjpCMioqLioiHhoeGhYSGg4GDhoKDg4GBg4GBgoGBgoOChISChISChIWDg4WEgoSEgYODgYGCgYGAgICAgX99f398fX18e3p6e3t7enp7fHx4e3x6e3x7fHx9fX59fn1+fX19fH19fnx9fn19fX18fHx7fHx6fH18fXx8fHx7fH1+fXx+f319fn19fn1+gH9+f4B/fn+AgICAgH+AgICAgIGAgICAgH9+f4B+f35+fn58e3t8e3p5eXh4d3Z1dHRzcXBvb21sbmxqaWhlZmVjYmFfX2BfXV1cXFxaWVlaWVlYV1hYV1hYWVhZWFlaWllbXFpbXV5fX15fYWJhYmNiYWJhYWJjZGVmZ2hqbG1ub3Fxc3V3dnd6e3t8e3x+f3+AgICAgoGBgoKDhISFh4aHiYqKi4uMjYyOj4+QkZKUlZWXmJmbm52enqCioqSlpqeoqaqrrK2ur7CxsrGys7O0tbW2tba3t7i3uLe4t7a3t7i3tre2tba1tLSzsrKysbCvrq2sq6qop6alo6OioJ+dnJqZmJeWlJKSkI+OjoyLioiIh4WEg4GBgH9+fXt6eXh3d3V0c3JxcG9ubWxsamppaWhnZmVlZGRjYmNiYWBhYGBfYF9fXl5fXl1dXVxdXF1dXF1cXF1cXF1dXV5dXV5fXl9eX19gYGFgYWJhYmFiY2NiY2RjZGNkZWRlZGVmZmVmZmVmZ2dmZ2hnaGhnaGloZ2hpaWhpamlqaWpqa2pra2xtbGxtbm1ubm5vcG9wcXBxcnFycnN0c3N0dXV2d3d4eHh5ent6e3x9fn5/f4CAgIGCg4SEhYaGh4iIiYqLi4uMjY2Oj5CQkZGSk5OUlJWWlpeYl5iZmZqbm5ybnJ2cnZ6en56fn6ChoKChoqGio6KjpKOko6SjpKWkpaSkpKSlpKWkpaSlpKSlpKOkpKOko6KioaKhoaCfoJ+enp2dnJybmpmZmJeXlpWUk5STkZGQj4+OjYyLioqJh4eGhYSEgoKBgIB/fn59fHt7enl5eHd3dnZ1dHRzc3JycXBxcG9vbm5tbWxrbGxraWppaWhpaGdnZ2dmZ2ZlZmVmZWRlZGVkY2RjZGNkZGRkZGRkZGRkZGRjZGRkY2RjZGNkZWRlZGVmZWZmZ2ZnZ2doaWhpaWpra2xsbW5tbm9ub29wcXFycnNzdHV1dXZ2d3d4eXl6enp7fHx9fX5+f4CAgIGAgYGCgoOEhISFhoWGhoeIh4iJiImKiYqLiouLjI2MjI2OjY6Pj46PkI+QkZCRkJGQkZGSkZKRkpGSkZGRkZKRkpKRkpGSkZKRkpGSkZKRkpGSkZCRkZCRkI+Qj5CPkI+Pjo+OjY6Njo2MjYyLjIuMi4qLioqJiomJiImIh4iHh4aHhoaFhoWFhIWEg4SDg4KDgoKBgoGAgYCBgICAgICAf4CAf39+f35/fn1+fX59fHx9fH18e3x7fHt6e3p7ent6e3p5enl6enl6eXp5eXl4eXh5eHl4eXh5eHl4eXh5eHh3eHh4d3h4d3h3d3h4d3l4eHd4d3h3eHd4d3h3eHh4eXh5eHl4eHl4eXh5enl6eXp5enl6eXp5ent6ent6e3x7fHx9fH18fX19fn1+fX5/fn9+f4B/gH+Af4CAgICAgIGAgYCBgoGCgYKCgoKDgoOEg4OEg4SFhIWEhYSFhoWGhYaHhoeHhoeGh4iHiIiHiImIiImKiYqJiYqJiouKi4qLiouKi4qLiouKi4qLiouKi4qLi4qLiouKi4qLiomJiomIiYiJiImIh4iIh4iHhoeGhYWGhYaFhIWEg4OEg4KDgoOCgYKBgIGAgICAgH+Af39+f359fn18fX19fHx8e3t6e3p7enl6eXp5enl6enl5eXh5eHh5eHl4eXh5eHl4eHd5eHd3eHl4d3h3eHd4d3h3eHh4d3h4d3h3d3h5eHl4eXh5eHl5eXp5enl6eXp7ent6e3p7e3t7fHt8e3x8fHx9fH1+fX59fn9+f35/gH+AgICAgICAgYGAgYKBgoGCgoKDgoOEg4SEhIWFhIWFhoWGhYaGhoaHhoeGh4aHhoeIh4iHiIeHiIeIh4iHiIeIiIiHiIeIh4iHiIiHiIeIh4iHiIeIh4eIh4eIh4aHh4aHhoeGh4aHhoWGhYaFhoWFhIWEhYSFhIWEhISDhIOEg4OCg4OCg4KDgYKCgYKCgYCBgIGAgYCBgICAgICAgICAf4B/f4B/gH+Af35/fn9+f35/fn1+fn19fn1+fX59fn19fX19fH18fXx9fH18fXx9fH18fXx8fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x8e3x7fHt8e3x7fHx8fXx9fH18fX5+fX59fn9+f35+f35/gH+Af4B/gICAgICAgICAgICAgYCBgIGAgIGAgYGBgoGCgYKBgoGCgYKBgoGCgoKDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KCgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGBgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCAgICBgIGAgYCBgIGAgYCBgIGAgYCBgExJU1RCAAAASU5GT0lDUkQMAAAAMjAwOC0wOS0yMQAASUVORwMAAAAgAAABSVNGVBYAAABTb255IFNvdW5kIEZvcmdlIDguMAAA" /> 
</audio> 

</body> 
</html> 
+0

Dzięki za aktualizację, Eric. Szkoda, że ​​IE9 nie obsługuje WAV, ponieważ jest to jeden format, który może być generowany po stronie klienta i może być obsługiwany we wszystkich przeglądarkach (nie mam problemów z formatem formatu, o których mi wiadomo). –

24

Oto moje wyniki badań. Spróbuję też z Oggiem, jeśli zostaniesz o to poproszony.

Legenda

  • W = fala WD = fali z base64 zakodowane dane: uri
  • M = MP3, MD = MP3 z base64 zakodowane dane: Wyniki URI

testu

  • Chrome 6.0.472.55: M, MD (bez fali)
  • Firefox 3.6 : W, koła (nie MP3: s)
  • Firefox 4.0b1: W, koła (nie MP3: s)
  • IPAD iOS 3,2: W, M (brak danych: URI)
  • iPhone iOS 4: W , M (brak danych: uri)
  • Opera 10.62: W, WD (bez mp3: s)
  • Safari 5.0.1: W, WD, M, MD
+1

Dzięki za wyniki! Chciałem używać dźwięków do trybu offline na iPadzie, wygląda na to, że niemożliwe, muszę wrócić do PhoneGap. – airportyh

+3

dzięki za uratowanie moich dni, próbowałem danychURI dla IPAD –

1

to pewnie dlatego, że IE9 nie robi” t obsługuje format WAV w swoim elemencie audio. Obsługiwane są tylko pliki MP3. Naprawdę mam nadzieję, że zmienią to w wersji RTM.

+0

IE10 (RTM) i nadal nie obsługuje WAV. Możesz odtwarzać WAV za pomocą osadzania, jednak nie ma tam wsparcia dla base64. –

0

Za to, co jest warte, udało mi się uzyskać duży (14mb) mp4 uuencoded i odtwarzać jako dane uri w OSX Safari, ale nie Chrome. Nadal mam więcej testów z mniejszymi porcjami, gdy tylko znajdę.

Warto również sprawdzić API MediaSource HTML5. Nie jest jeszcze szeroko obsługiwany, ale umożliwia dołączanie dowolnych bajtów do odtwarzania multimediów.

http://html5-demos.appspot.com/static/media-source.html

Powiązane problemy