 Zapisanie informacji o odtwarzanych plikach video |
  |
| Zapisanie informacji o odtwarzanych plikach video |
 24.06.2024, 10:48:31
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 1 Pomógł: 0 Dołączył: 24.06.2024 Ostrzeżenie: (0%) 
 |
Dzień dobry wszystkim. Na początku zaznaczę, że nie zajmuję się programowaniem, próbuję coś zrobić samemu bazując na wiedzy z intenretu.
Zrobiłem bardzo prostą stronę internetową na potrzebę dość wąskiej grupy użytkowników. Wrzucam tam swoje filmy, a strona najczęściej jest oglądana przez przeglądarki ze smartfonów. Wszystko działa ok, pojawia się tabela z filmami, każdy film ma swoje kontrolki odtwarzania, domyślne, bo ja ich w żaden sposób nie programowałem. Wszystko działa, ale chciałbym dodać statystykę, które z filmów były oglądane plus kiedy były odtwarzane. Poniżej kod, który mam aktualnie, następnie zmodyfikowany i dodany nowy plik wgrany na serwer, niestety nic się nie zapisuje do pliku films.txt. Pojawia mi się dodatkowe pole "Odtwórz film 006" ale jest nieaktywne, a poza tym ja chciałbym, żeby nie było dodatkowych pól, tylko odtwarzanie było jak dotychczas, czyli poprzez domyślną kontrolkę. Nie chciałbym także, by strona w jakiś sposób musiała się przeładować. Zostawiłem komentarze, które znalazłem przy poradach jak to zrobić, wybrałem opcję Node,js, stąd dodatkowy plik wgrany na serwer. Będę bardzo wdzięczny za pomoc. Pierwotny kod: Kod <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- table.tabela { border: 2px solid white; border-collapse: collapse; margin: 0 auto; } table.tabela td { border: 2px solid white; border-bottom: 2px dotted white; border-top: 2px dotted white; } table.tabela td.inne { border-bottom: 2px solid white; } --> </style> </head> <body style="background-image: url(tlo.png); background-repeat: repeat;"> <table class="tabela"> <tr style="border-bottom: double black"> <td colspan="2" class="inne" style="text-align: center; background-color: white"><span style="font-size: large; font-weight: bold; color: black"> Napis tytułowy 1<br> </span></td> </tr> <tr> <td style="width: 50%"><video controls width="350" poster="006.jpg"><source src="006.mp4" type="video/mp4"></video></td> <td style="width: 50%"><video controls width="350" poster="005.jpg"><source src="005.mp4" type="video/mp4"></video></td> </tr> <tr> <td class="inne" style="width: 50%; text-align: center"><span style="font-size: large; color: white"><? echo 'Klip dodany w dniu '.date('d.m.Y',filemtime("006.mp4")); ?></span></td> <td class="inne" style="width: 50%; text-align: center"><span style="font-size: large; color: white"><? echo 'Klip dodany w dniu '.date('d.m.Y',filemtime("005.mp4")); ?></span></td> </tr> </table> </body> </html> Zmodyfikowany kod: Kod <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- table.tabela { border: 2px solid white; border-collapse: collapse; margin: 0 auto; } table.tabela td { border: 2px solid white; border-bottom: 2px dotted white; border-top: 2px dotted white; } table.tabela td.inne { border-bottom: 2px solid white; } --> </style> <script> // Funkcja zapisująca informacje o odtwarzanych filmach function zapiszInformacjeOFilmie(nazwaFilmu) { const dzisiaj = new Date(); const data = dzisiaj.toLocaleDateString(); const godzina = dzisiaj.toLocaleTimeString(); // Tworzenie tekstu do zapisania const informacje = `${nazwaFilmu} odtworzono dnia ${data} o godzinie ${godzina}\n`; // Zapis do pliku film.txt (możesz dostosować ścieżkę) // Tutaj używam fikcyjnej ścieżki "/sciezka/do/pliku/film.txt" // W rzeczywistości musisz dostosować to do swojej struktury plików const sciezkaDoPliku = "./films.txt"; // Wykorzystanie odpowiedniej metody zapisu (np. AJAX, Fetch lub Node.js) // W tym przykładzie użyję console.log do symulacji zapisu console.log(informacje); } </script> </head> <body style="background-image: url(tlo.png); background-repeat: repeat;"> <table class="tabela"> <tr style="border-bottom: double black"> <td colspan="2" class="inne" style="text-align: center; background-color: white"><span style="font-size: large; font-weight: bold; color: black"> Napis tytułowy 1<br> </span></td> </tr> <tr> <td style="width: 50%"><video controls width="350" poster="006.jpg"><source src="006.mp4" type="video/mp4"></video><button onclick="zapiszInformacjeOFilmie('Film 006')">Odtwórz Film 006</button></td> <td style="width: 50%"><video controls width="350" poster="005.jpg"><source src="005.mp4" type="video/mp4"></video><button onclick="zapiszInformacjeOFilmie('Film 005')">Odtwórz Film 005</button></td> </tr> <tr> <td class="inne" style="width: 50%; text-align: center"><span style="font-size: large; color: white"><? echo 'Klip dodany w dniu '.date('d.m.Y',filemtime("006.mp4")); ?></span></td> <td class="inne" style="width: 50%; text-align: center"><span style="font-size: large; color: white"><? echo 'Klip dodany w dniu '.date('d.m.Y',filemtime("005.mp4")); ?></span></td> </tr> </table> </body> </html> Dodatkowy plik: Kod // server.js
const fs = require('fs'); const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const port = 3000; // Wybierz dowolny port app.use(bodyParser.json()); // Obsługa żądania POST app.post('/save-film-data', (req, res) => { const { filmName, date, time } = req.body; // Dane przekazane z klienta // Tworzenie tekstu do zapisania const filmInfo = `${filmName} odtworzono dnia ${date} o godzinie ${time}\n`; // Zapis do pliku (np. film.txt) fs.appendFile('film.txt', filmInfo, (err) => { if (err) { console.error('Błąd podczas zapisu do pliku:', err); res.status(500).send('Błąd podczas zapisu'); } else { console.log('Informacje o filmie zapisane!'); res.status(200).send('Informacje zapisane'); } }); }); app.listen(port, () => { console.log(`Serwer nasłuchuje na porcie ${port}`); }); Ten post edytował smithson 24.06.2024, 10:51:53 |
 |
 
|
|
|
Wersja Lo-Fi | Aktualny czas: 24.06.2025 - 07:39 |
