Odtwarzanie filmów na Playstation 4

Tak! To nietypowy wpis. Ale zdziwicie się jak bardzo jest związany z tematyką tworzenia stron internetowych i wielbionej przeze mnie technologii HTML5. Wpis odnosi się tak naprawdę do wszystkich urządzeń podłączonych do sprzętu TV, które mają wbudowaną funkcję przeglądarki WWW.

Artykuł jest przewodnikiem, który pokazuje krok po kroku jak stworzyć aplikację „przekształcającą” dowolne urządzenie mogące wyświetlać strony internetowe w domowe centrum rozrywki. Nieprawdopodobne? No to zaczynamy.

Rozwiązanie opracowałem samodzielnie podczas niedzielnego popołudnia, kiedy to bardzo chciałem obejrzeć ściągnięty komputerem film na telewizorze. Niestety wyjście HDMI w moim laptopie uszkodziło się wcześniej a oglądanie filmu na trzynastocalowym lub szesnastocalowym wyświetlaczu było dla mnie nie do przyjęcia. Tak, wiem. Można odtworzyć film z urządzenia USB podłączonego do TV lub za sprawą jakiejś super technologii: Bluetooth, WiDi lub innych wynalazków. Pech chciał, że wówczas nie miałem do takowych rozwiązań dostępu. Dodatkowo, wizja uruchomienia filmu z komputera bezpośrednio na konsoli PS4 była dla mnie bardzo kusząca.

Uwaga: przedstawione rozwiązanie nie jest najlepszą lub jedyną metodą na osiągnięcie tego celu. Jest za to najszybsze do zaimplementowania a przecież o to nam najczęściej chodzi. Są już inne rozwiązania w sieci, jednak procedury często wymagają czasochłonnych rejestracji, logowania, dodawania mediów i innych bzdur.

Teoria

Cały trik opiera się na bardzo prostej idei: skoro coś może przeglądać strony internetowe (w tym konkretnym przypadku jest to PS4) a na dodatek przeglądarka tego czegoś jest kompatybilna z HTML5 to urządzenie, o którym mowa na pewno jest wstanie odtwarzać filmy oraz pliki MP3 nie wspominając o oczywistej funkcji przeglądania zdjęć.

Sony Computer Entertainment zablokowało w urządzeniu PS4 odtwarzanie multimediów wprost z przeglądarki, tzn. wpisując adres pliku z materiałem w pasku adresu dostaniemy taką oto odpowiedź:

Być może w innych urządzeniach też są takie ograniczenia lub będą one stosowane w niedalekiej przyszłości. Aby obejść to ograniczenie wystarczy króciutka linijka kodu osadzająca odtwarzacz multimediów na stronie internetowej.

<video src="film.mp4"></video>

Sieć i serwer WWW

Rozwiązanie wymaga posiadania domowej sieci lokalnej. Skoro Wasza konsola i komputer są podłączone do Internetu to w większości przypadków spełniacie ten wymóg.  Aby PS4 mogło uzyskać dostęp do spreparowanej strony internetowej potrzebujemy serwera WWW. Być może wielu w tym momencie ogarnia przerażenie i myśli, że zaczynają się schody – nic bardziej mylnego. Uwierzcie, że uruchomienie serwera Apache w naszej domowej sieci lokalnej jest równe proste co instalacja zwykłego programu komputerowego. Wszystko to jest możliwe za sprawą darmowego i lekkiego pakietu oprogramowania XAMPP.

Publikowanie strony w Internecie byłoby najprostszym rozwiązaniem, jednak wykluczyłem je z oczywistych powodów.  Wysyłając pliki na serwer, stracilibyśmy sporo czasu a po drodze w większości przypadków złamalibyśmy prawo. Takie rozwiązanie to także koszty związane z utrzymywaniem serwera, no bo kto dysponuje serwerem plików o pojemności umożliwiającej przechowywanie powiększającej się wideoteki.

Efektywne udostępnianie multimediów

Aby ułatwić proces dodawania kolejnych filmów do minimum, wystarczy prościutki kod JavaScript. Będzie on dynamicznie tworzył kolejne okna z multimediami mając do dyspozycji listę plików, którą też utworzymy automatycznie. Nie jest to konieczny krok jednak funkcja zaoszczędzi nam sporo wysiłku w momencie aktualizacji naszego domowego wideo na życzenie.

Tworzenie długiej listy plików może być bardzo męczące. Biorąc pod uwagę, że filmy zwykle są poukładane w osobnych folderach a nazwy to wieloznakowe łańcuchy, ręczne tworzenie listy naszej wideoteki może być niemal niemożliwe. Tutaj z pomocą przychodzą nam strumienie i konsola systemu Widows.

Tutorial

Krok 1: Instalujemy oprogramowanie XAMPP na komputerze, który będzie przechowywał filmy lub do którego będziemy podłączać dyski i pamięci z multimediami.

Teraz czas na zmianę ustawień i uruchomienie serwera. Konfiguracja to krok nieobowiązkowy ale ułatwi nam dodawanie filmów. Klikamy zaznaczony przcycisk „Config” i z menu wybieramy Apache (httpd.conf).

Otworzy nam się plik z konfiguracją serwera. Odszukujemy część zawierającą linię DocumentRoot i wpisujemy ścieżkę do folderu z filmami według poniższego wzoru:

DocumentRoot "D:/Filmy/"
<Directory "D:/Filmy">

Zapisujemy plik i klikamy na położony po lewej stronie przycisk „Start”. W tym momencie serwer Apache jest uruchomiony.

Krok 2: Tworzymy stronę odtwarzacza. Proponuję tworzyć go w folderze o nazwie PS4 Player w folderze z filmami do którego wcześniej wpisywaliśmy ścieżkę. Tworzymy w nim plik tekstowy o nazwie index.html i wpisujemy kod według poniższego szablonu:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>PS4 Video Player</title>
		<link href="//xgate.pl/xdev/_videojs/video-js.css" rel="stylesheet" type="text/css">
		<script src="//xgate.pl/xdev/_videojs/video.js"></script>
		<script src="//xgate.pl/xdev/js/jquery-1.6.3.min.js"></script>
		<script>
		videojs.options.flash.swf = "video-js.swf";
		</script>
		<script>
		$(document).ready(function(){
		$("video").attr({width:"640",height:"360",id:"example_video_1",type:"video/mp4"});
		});
		</script>
	</head>
	<body>
		<video class="video-js vjs-default-skin" controls preload="none" data-setup="{}">
		<source src="../Godzilla - 2014 - 1080p.mp4" type='video/mp4' />
		</video>
	</body>
</html>

Oczywiście, linijkę z Godzillą zmieniamy na ścieżkę prowadzącą do naszego filmu. W tym momencie, sprawdźmy czy działa. W tym celu otwieramy przeglądarkę i wpisujemy adres IP naszego komputera z filmami. Adres można sprawdzić w konsoli systemu Windows za pomocą polecenia ipconfig.

Jak widać, działa. Nie pozostaje nic innego jak tylko kliknąć przycisk zmieniający widok na tryb pełnoekranowy. Jednak jeszcze wprowadzimy małą modyfikacje, która ułatwi nam dodawanie kolejnych filmów. Kod JavaScript będzie generował kolejne okienka z odtwarzaczem na podstawie wcześniej zamieszczonej listy.

Krok 3: Fragment:

<video controls preload="none" data-setup="{}">
<source src="../Robocop/Robocop.mp4" type='video/mp4' />
</video>

zastąpimy poniższym kodem:

<script>
var i = 0;
while (i<lista.length)
{document.write('<h2> </h2><video class="video-js vjs-default-skin" controls      preload="none" data-setup="{}"> <source src="');
document.write(lista[i]); document.write('" type="video/mp4" /> </video>');i++;}
</script>

a w sekcji head umieścimy listę plików:

<script>
var lista = [
"../Nazwa_Filmu_1.mp4",
"../Nazwa_Filmu_2.mp4",
"../Nazwa_Filmu_3.mp4"
];
</script>

Krok 4: Automatyczne generowanie listy plików. Przypominam, krok nieobowiązkowy.

Z menu start wybieramy „uruchom” i wpisujemy komendę „cmd”. Przechodzimy do folderu z filmami. Komendą „cd..” przechodzimy do folderu nadrzędnego a „cd nazwa_folderu” powoduje wejście do folderu o danej nazwie. Kiedy już znajdziemy się w katalogu z filmami wystarczy jedna komenda:

dir *.mp4 /b /s >> d:\filmy\lista.txt

W pliku do którego podaliśmy ścieżkę znajduje się pięknie ułożona lista z plikami MP4. Przed wklejeniem jej jednak do kodu strony należy podmienić następujące ciągi aby lista była zgodna z zapisem ścieżki w kodzie strony :

• każdy znak: \ na znak: /
• każdy ciąg: D:\filmy na: ..

Dodatkowo każdą linię rozpoczynamy i kończymy znakiem cudzysłowu, dodatkowo wszystkie za za wyjątkiem ostatniej kończymy przecinkiem. Zadanie ułatwi nam dowolny edytor tekstu z funkcją znajdowania i podmieniania znaków czyli np. Notepad++ lub jak już niechcemy nic ściągać to Microsoft Word czy Open Office Writer.

Tak przygotowaną listę kopiujemy i wklejamy w wiadome miejsce zwracając uwagę na to aby przypadkiem nie usunąć dodatkowych znaków. To wszystko!

Podsumowanie

HTML5 daje duże możliwości. Dodając do tego nowinki z CSS3 i jQuery możemy tworzyć aplikacje o jakich wcześniej mogliśmy tylko marzyć. W zaledwie parę minut stworzyliśmy wieloplatformowy odtwarzacz multimediów dostępny za pomocą przeglądarki internetowej, który jednak nie wymaga połączenia z Internetem a tylko sprawną sieć domową. Taką aplikację możemy udoskonalać dodając kolejne funkcje. Nic nie stoi na przeszkodzie aby dodawanie filmów całkowicie zautomatyzować za pomocą PHP. Zarządzenie zaawansowaną biblioteką multimediów mogła by umożliwić baza MySQL, jednak to już zadanie na dobrych parę godzin.