{"id":1806,"date":"2018-03-07T23:34:44","date_gmt":"2018-03-07T23:34:44","guid":{"rendered":"https:\/\/mark-sweeney.com\/?p=1806"},"modified":"2020-06-05T12:26:36","modified_gmt":"2020-06-05T12:26:36","slug":"testing-webvtt-closed-captions","status":"publish","type":"post","link":"https:\/\/mark-sweeney.com\/?p=1806","title":{"rendered":"Testing WebVTT Closed Captions"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-kb268xf4-5ae2f45445a242d343b289c27ab68501\">\n#top .av_textblock_section.av-kb268xf4-5ae2f45445a242d343b289c27ab68501 .avia_textblock{\nfont-size:18px;\ncolor:#141414;\n}\n<\/style>\n<section  class='av_textblock_section av-kb268xf4-5ae2f45445a242d343b289c27ab68501 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock av_inherit_color'  itemprop=\"text\" ><p>Testing WebVTT captions some more so I can compare them to how YouTube renders the captions vs Quicktime and browsers.<\/p>\n<p>Html 5 and Quicktime render a little differently (not shown here). Quicktime with WebVTT captions embedded in the video has a built-in &#8216;safe-area&#8217; where it displays Closed Captions, so captions can&#8217;t be displayed right at the edges of the video.<\/p>\n<p>Youtube has some quirks. Left align does not work, vertical position is uneven, and right align only works if you add a space after the colon in the markup (i.e. &#8220;align: right&#8221; works, &#8220;align:right&#8221; does not.)<\/p>\n<p>mp4 video below with sidecar WebVTT Closed Captions:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/mark-sweeney.com\/Video\/WebVTTTest.html\" width=\"660\" height=\"380\"><\/iframe>\u200b<\/p>\n<p>Youtube video with the same WebVTT Closed Captions file showing inconsistencies in vertical spacing and left alignment that doesn&#8217;t work.<\/p>\n<div class='avia-iframe-wrap'><iframe loading=\"lazy\" title=\"TestCaptions\" width=\"1500\" height=\"844\" src=\"https:\/\/www.youtube.com\/embed\/maf7Gxr97QU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1828,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[65,58],"tags":[],"class_list":["post-1806","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","category-closed-captioning"],"acf":[],"_links":{"self":[{"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/posts\/1806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1806"}],"version-history":[{"count":10,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/posts\/1806\/revisions"}],"predecessor-version":[{"id":29786,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/posts\/1806\/revisions\/29786"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/media\/1828"}],"wp:attachment":[{"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}