HTML5 Video > Adding captions and subtitles

kormos · 3 Μαρτίου 2018

Καλησπέρα σας,

προσπαθώ να ολοκληρώσω μια απλή html που θέλω για προσωπική (εσωτερική) χρήση (δικτυακά) και προφανώς κάτι μου διαφεύγει.

Θέλω αρχεία και βίντεο που βρίσκονται μέσα σε φακέλους (τοπικά) επιλέγοντας το αρχείο για αναπαραγωγή να μπορεί να φορτώνει κατ επιλογήν τους υπότιτλους.

Παραθέτω τον κώδικα μήπως και μπορεί κάποιος να μου εντοπίσει (αν έχει το χρόνο) το λάθος που υπάρχει και δεν μπορεί να "διαβάσει" το ξεχωριστό αρχείο.

Spoiler


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>HTML5 video captions and subtitles</title>

    <link rel="stylesheet" href="style/style.css">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <video controls preload="metadata">
		  <source src="video/short.mp4" type="video/mp4">
		  <source src="video/short.webm" type="video/webm">
		  <track label="English" kind="subtitles" srclang="en" src="captions/vtt/subtitles-en.vtt" default>
      <track label="English" kind="captions" srclang="en" src="captions/vtt/captions-en.vtt">
		  <track label="Greek" kind="subtitles" srclang="el" src="captions/vtt/subtitles-el.vtt">

      <p>It appears that your browser doesn't support HTML5 video. Here's a <a href="video/short.mp4">direct link to the video instead</a>.</p>
	  </video>


  </body>
</html>

*φυσικά και είναι ιντερνετικός (ο κώδικας)

ΜΦΧ

Predatorkill · 3 Μαρτίου 2018

Η κονσολα εμφανιζει κατι; Το path των υποτιτλων ειναι σωστο;

ajaxmonkey4hire · 3 Μαρτίου 2018

οδηγίες:

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video

kormos · 3 Μαρτίου 2018

6 ώρες πριν, Predatorkill είπε

Η κονσολα εμφανιζει κατι; Το path των υποτιτλων ειναι σωστο;

Καλησπέρα,

ναι είναι σωστή η διαδρομή...

4 ώρες πριν, ajaxmonkey4hire είπε

οδηγίες:

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video

Βλέπεις κάτι που μου έχει διαφύγει;

ajaxmonkey4hire · 3 Μαρτίου 2018

Ο κωδικός φαίνεται εντάξει.

Άρα μένουν 2 πράγματα:

1. Σωστά URL's

2. CORS Headers

Predatorkill · 3 Μαρτίου 2018

22 λεπτά πριν, ajaxmonkey4hire είπε

2. CORS Headers

Θα φωναζε η κονσολα αλλα δε μας λεει αν λεει κατι (η κονσολα).

kormos · 3 Μαρτίου 2018

31 λεπτά πριν, ajaxmonkey4hire είπε

Ο κωδικός φαίνεται εντάξει.

Άρα μένουν 2 πράγματα:

1. Σωστά URL's

2. CORS Headers

8 λεπτά πριν, Predatorkill είπε

Θα φωναζε η κονσολα αλλα δε μας λεει αν λεει κατι (η κονσολα).

Θα επανέλθω αύριο, γιατί δεν έχω πρόσβαση αυτή τη στιγμή σε υπολογιστή.

ajaxmonkey4hire · 3 Μαρτίου 2018

στείλε μου ένα pm με την url αν το έχεις κάπου online και θα το κοιτάξω.

ίσως τα vtt σου έχουν πρόβλημα.

kormos · 3 Μαρτίου 2018

16 λεπτά πριν, ajaxmonkey4hire είπε

στείλε μου ένα pm με την url αν το έχεις κάπου online και θα το κοιτάξω.

ίσως τα vtt σου έχουν πρόβλημα.

Ενδεχομένως έχω κάνει "πατάτα". Δεν την έχω online...

Θα σου στείλω παρ' αυτά το πρωί αν θες...

kormos · 4 Μαρτίου 2018

Καλημέρα σας,

Τα αρχεία είναι online τώρα όλα και λειτουργεί κανονικά!

Τελικά ήταν λάθος δικό μου (λογικά). Το έτρεχα τοπικά μέσα απο ένα φάκελο το html και προφανώς δεν μπορούσε να αντλήσει όλα τα στοιχεία για να παίξει.

Μόλις ζήτησε ο @ajaxmonkey4hire να δώσω λινκ τα "έκανα" ονλαιν και έπαιξε

Να υποθέσω πως δεν υπάρχει άλλος τρόπος για παραμετροποίηση ώστε να μπορεί να λειτουργεί τρέχοντας offline την html? (ή αν υπάρχει άλλη μέθοδος να υλοποιήσω αυτό που θέλω.

(στην ουσία θέλω αντί να πρέπει να ψάχνω μέσα στους φακέλους τα αρχεία να τα έχω σε μια html οργανωμένα με εικόνες)

Ευχαριστώ για το χρόνο σας!

ajaxmonkey4hire · 4 Μαρτίου 2018

offline (file:// αντί για HTTP://) δεν γίνετε με html5 player. Μπορείς να τα παίξεις με VLC βέβαια αλλά αυτό δέχεται υπότιτλους μόνο σε srt.

Επεξ/σία 4 Μαρτίου 2018 από ajaxmonkey4hire

kormos · 4 Μαρτίου 2018

42 λεπτά πριν, ajaxmonkey4hire είπε

offline (file:// αντί για HTTP://) δεν γίνετε με html5 player. Μπορείς να τα παίξεις με VLC βέβαια αλλά αυτό δέχεται υπότιτλους μόνο σε srt.

Κατάλαβα, γι αυτό άνοιξα το θέμα, επειδή σε offline έβλεπα πως δεν μπορεί να αναπαράγει τους υπότιτλους. Έχεις κάτι άλλο στο μυαλό σου που θα μπορούσα να κάνω; Έστω ότι το πιάνω απο την αρχή...

TheDarkKnight · 4 Μαρτίου 2018

5 λεπτά πριν, kormos είπε

Κατάλαβα, γι αυτό άνοιξα το θέμα, επειδή σε offline έβλεπα πως δεν μπορεί να αναπαράγει τους υπότιτλους. Έχεις κάτι άλλο στο μυαλό σου που θα μπορούσα να κάνω; Έστω ότι το πιάνω απο την αρχή...

Για να παίξουν τα αρχεία offline μέσω http, θα πρέπει να τα τοποθετήσεις σε έναν web server. Πχ αν η εφαρμογή σου είναι απλή html ή και php, τοποθέτησε τα στο φάκελο htdocs της εγκατάστασης του xampp.

kormos · 4 Μαρτίου 2018

1 λεπτό πριν, TheDarkKnight είπε

Για να παίξουν τα αρχεία offline μέσω http, θα πρέπει να τα τοποθετήσεις σε έναν web server. Πχ αν η εφαρμογή σου είναι απλή html ή και php, τοποθέτησε τα στο φάκελο htdocs της εγκατάστασης του xampp.

Ωραία! Θα επανέλθω με νεότερα μετά τις "δοκιμές"

ajaxmonkey4hire · 4 Μαρτίου 2018

γράψε ένα μικρο webserver βάλτο σε ένα nuc στο lan σου και τελείωσες.

για την αρχή μπορείς να χρησιμοποιήσεις ένα πειραματικό που έγραψα εγώ πέρυσι για όμοια εφαρμογή:

/*
 * server: 		node.js quickanddirty/web server
 * author: 		[email protected]
 * created:		20170219
 * updates:
 *
 */

'use strict';

const http	= require('http');
const url 	= require("url");
const qs 	= require('querystring');
const path	= require("path");
const fs	= require("fs");
const zlib  = require('zlib');


const fTypes = {
	'.css':  {mime:'text/css', gz:1},
	'.js':   {mime:'text/javascript', gz:1},
	'.html': {mime:'text/html; charset=UTF-8', gz:1},
	'.mpg' : {mime:'video/mpeg'},
	'.mp4' : {mime:'video/mpeg'},
	'.mpeg': {mime:'video/mpeg'},	
	'.ts':   {mime:'video/MP2T'},
	'.webm': {mime:'video/MP2T'},	
	'.m3u8': {mime:'video/MP2T', gz:1},
	'.svg':  {mime:'video/MP2T'},	
	'.gif' : {mime:'image/gif'},
    '.jpg' : {mime:'image/jpeg'},
    '.jpeg': {mime:'image/jpeg'},	
   	'.png' : {mime:'image/png'},
	'.ico' : {mime:'image/x-icon'}
};

//serve static resource--------------------------------------------------------
function serve(filePath, out, acceptEncoding){
	var ext = path.extname(filePath);
	if ( fTypes[ext] ){
		fs.stat(filePath, function(err, stat){			
			if ( err ){
				out.writeHead(404, {'Content-Type': 'text/html'});
				out.end('<!doctype html><html><body>File not found</body></html>');	
			}else{				
				var raw = fs.createReadStream(filePath, {bufferSize: 16384});					
				
				if ( acceptEncoding && fTypes[ext].gz ){
					if (acceptEncoding.match(/\bdeflate\b/)) {
						out.writeHead(200, {'Content-Type': fTypes[ext].mime, 'content-encoding':'deflate'});
						raw.pipe(zlib.createDeflate()).pipe(out);
					} else if (acceptEncoding.match(/\bgzip\b/)) {
						out.writeHead(200, {'Content-Type':fTypes[ext].mime, 'content-encoding':'gzip'});
						raw.pipe(zlib.createGzip()).pipe(out);
					} else {
						out.writeHead(200, {'content-type':fTypes[ext].mime, 'content-length':stat.size});
						raw.pipe(out);
					}
				}else{
					out.writeHead(200, {'content-type':fTypes[ext].mime, 'content-length':stat.size});
					raw.pipe(out);					
				}
			}
		});
	}else{
		out.writeHead(401, {'Content-Type': 'text/html'});
		out.end('<!doctype html><html><body>Mime type not supported</body></html>');	
	}
};  

//server-----------------------------------------------------------------------
http.createServer(
	function(req, res){
		var now = parseInt(Math.floor(new Date().getTime()*0.001));
		var method = req.method.toUpperCase();
		var uripath= url.parse(req.url).pathname.replace(/^\/|\/$/g, '').trim();
		var tokens = uripath.split('/');
		
		console.log(uripath);
		switch ( tokens.shift() ){
			case '': case 'index.html': case 'index.htm': case 'index':
				serve('wwwroot/index.html', res, req.headers['accept-encoding']||'');			
				break;
			default:
				serve('wwwroot/'+uripath, res, req.headers['accept-encoding']||'');
				break;
		}			
	}
).listen(8080);

Σύνδεση

HTML5 Video > Adding captions and subtitles

Προτεινόμενες αναρτήσεις

kormos

Predatorkill

ajaxmonkey4hire

kormos

ajaxmonkey4hire

Predatorkill

kormos

ajaxmonkey4hire

kormos

kormos

ajaxmonkey4hire

kormos

TheDarkKnight

kormos

ajaxmonkey4hire

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση