Closed Bug 1499802 Opened 6 years ago Closed 6 years ago

[webvtt] Browser doesn't render WebVTT embedded Styles used by Voice/Class spans

Categories

(Core :: Audio/Video: Playback, defect, P3)

Product:
Core
Component:
Audio/Video: Playback
Version:
62 Branch
Type:
defect

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1321489

People

(Reporter: rmikhael, Assigned: alwu)

Details

Attachments

(4 files)

WebVTTshort.txt
1.60 KB, text/plain
Details
ASSshort.txt
1.44 KB, text/plain
Details
libASS.jpg
362.44 KB, image/jpeg
Details
NativeNoStyles.jpg
363.85 KB, image/jpeg
Details
Attached file WebVTTshort.txt —
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 Steps to reproduce: This might be a duplicate of Bug ID #1321490. But could provide a good example for your testing/dev work. At Ellation/Crunchyroll we implemented live ASS to WebVTT conversion on Kaltura's nginx-vod-module. When we open our VOD stream URL on the browser, and enable subtitles/captions we don't get the expected styled fonts. We are using styles with the following tags: color, font-family, font-size, text-shadow, text-decoration. We are applying some of these style tags using a voice span, and one of them using class specifier. Neither of these is getting rendered correctly. Both fallback to White on Black background with fixed font-size from a fixed font-family. Actual results: Player doesn't apply the correct font, font-size, color, shadows, nor text-decoration strike-through. We get the text written in White over Black background, in fixed font and fixed size, and no strike-through. Expected results: Attaching what libASS renders from the libASS source. We expect something very close. I am using FireFox 62.0.3 (64-bit) on macOS Sierra. But this happens regardless of the platform.
Attached file ASSshort.txt —
original ASS file
Attached image libASS.jpg —
Attached image NativeNoStyles.jpg —
Hi, I am assigning a component to this issue in order to involve the development team and get an opinion on this.
Component: Untriaged → Audio/Video: Playback
Product: Firefox → Core
Depends on: 1321490
Priority: -- → P3

Hi, Rafik,
Do you mind to provide a link for us in order to check this problem?
Thank you!

Flags: needinfo?(rmikhael)

Hi Alastor,

Unfortunately our testing urls are secured, so won't work for you. Besides, I have styles disabled in production.

But you can serve attached file locally very easy. I am sure you have your own way to do the same:

  1. Install http-server (e.g. https://www.youtube.com/watch?v=vnPemSnnJYY)
  2. Put any sample video .mp4, the attached .vtt file above, and any sample favicon.ico in a directory.
  3. Create a new index.html file in the same directory. Fill it as below (modify .mp4 name).
  4. cd to that directory, run "http-server". This will start a local server on port 8080.

<!DOCTYPE html>
<html>
<head>
<title>Rafik's Test Video Element</title>
<link rel="shortcut icon" href="">
</head>
<body>
<video id="video" width=“1920” height="1080" controls>
<source src="3319786.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="WebVTTshort.vtt" default>
</video>
</body>
</html>

  1. install https://addons.mozilla.org/en-US/firefox/addon/native_hls_playback/ on firefox
  2. open firefox and hit localhost:/8080

You will see how the browser renders the WebVTT with embedded styles (for the first 6 seconds). Totally ignores all the voice or class spans, and just applies whatever the default CSS used by the player (native_hls_playback in this case). No colors, shadows, outline or background colors, font family or font-size honored.

The method above uses one full .vtt file as a subtitle track. In our test environment we actually receive an HLS index.m3u8 detailing the URL for each segmented .vtt (example below), and receive segmented WebVTT files with the used styles in that segment defined. And we still see the same exact rendering as the method above.

example index.m3u8:
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-ALLOW-CACHE:YES
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:5.000,
https://a-vrv.akamaized.net/evs/1acf83d03bf9161bead529f454bbc099/assets/43e5c7085dc24b1515622513a15fedc6_timed_text_subtitle_en-US.srt/seg-1.vtt?t=st=1551465487~exp=1551551887~acl=/evs/1acf83d03bf9161bead529f454bbc099/assets/43e5c7085dc24b1515622513a15fedc6_timed_text_subtitle_en-US.srt/*~hmac=8131d58fd03a3d52b87c3882437a6733672e6520dad6f6f7803ae59f39a128e3
#EXTINF:5.000,
https://a-vrv.akamaized.net/evs/1acf83d03bf9161bead529f454bbc099/assets/43e5c7085dc24b1515622513a15fedc6_timed_text_subtitle_en-US.srt/seg-2.vtt?t=st=1551465487~exp=1551551887~acl=/evs/1acf83d03bf9161bead529f454bbc099/assets/43e5c7085dc24b1515622513a15fedc6_timed_text_subtitle_en-US.srt/*~hmac=8131d58fd03a3d52b87c3882437a6733672e6520dad6f6f7803ae59f39a128e3
#EXTINF:10.000,
https://a-vrv.akamaized.net/evs/1acf83d03bf9161bead529f454bbc099/assets/43e5c7085dc24b1515622513a15fedc6_timed_text_subtitle_en-US.srt/seg-3.vtt?t=st=1551465487~exp=1551551887~acl=/evs/1acf83d03bf9161bead529f454bbc099/assets/43e5c7085dc24b1515622513a15fedc6_timed_text_subtitle_en-US.srt/*~hmac=8131d58fd03a3d52b87c3882437a6733672e6520dad6f6f7803ae59f39a128e3
#EXT-X-ENDLIST

Flags: needinfo?(rmikhael)

localhost:8080

Thank you for your detailed information, assign this bug to myself and will check it later.

Assignee: nobody → alwu
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: Browser doesn't render WebVTT embedded Styles used by Voice/Class spans → [webvtt] Browser doesn't render WebVTT embedded Styles used by Voice/Class spans

We haven't implement the ::cue(), so not just voice or span, all selectors are not working currently.

Status: NEW → RESOLVED
Closed: 6 years ago
No longer depends on: 1321490
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: