{"id":968,"date":"2016-01-01T17:41:46","date_gmt":"2016-01-01T17:41:46","guid":{"rendered":"https:\/\/mark-sweeney.com\/?p=968"},"modified":"2020-06-05T21:00:53","modified_gmt":"2020-06-05T21:00:53","slug":"webvtt-close-caption-test","status":"publish","type":"post","link":"https:\/\/mark-sweeney.com\/?p=968","title":{"rendered":"WebVTT Closed Caption Testing"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_full-79ff81c021393065cee878051452f6a6\">\n.flex_column.av-av_one_full-79ff81c021393065cee878051452f6a6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_full-79ff81c021393065cee878051452f6a6 av_one_full  avia-builder-el-0  el_before_av_one_full  avia-builder-el-first  first flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-kb2ci50i-cd92260c6df5ffb49d7b37159bb2d24c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>I&#8217;ve been spending more time learning about WebVTT, a W3C standard for displaying timed text in connection with the HTML5 element &#8211; i.e. Closed Captioning for Internet Videos. It took about a day to get it working on Mac Safari, iOS Safari, Chrome for Android tablet, Windows Phone 8.1, Windows (PC) 8.1, and Windows 10.<\/p>\n<p>You can see the video down below, and <a href=\"https:\/\/mark-sweeney.com\/Video\/\">through this link<\/a>.Both the Desktop and Mobile versions of Windows 8.1 were the biggest pains. I finally figured out I needed a .htaccess file on my server with the following line of code:<\/p>\n<p>AddType text\/vtt .vtt<\/p>\n<p>This is a plain text file in the main directory of the server with the name &#8220;.htaccess&#8221; that lets Windows 8 read the .vtt file. Windows 10 didn&#8217;t need this.<\/p>\n<p>If you are on a Mac, iOS, Android, Windows 8 or Windows 10\u00a0you can watch a\u00a0Scene from George Romero&#8217;s &#8220;Night of the Living Dead&#8221; with WebVTT\u00a0Closed Captions (don&#8217;t forget to turn on the Closed Captions in settings for whichever platform &amp; device you have).<\/p>\n<p>To have the video show up in WordPress with captions took\u00a0a little work as well. Straightforward html <a href=\"https:\/\/mark-sweeney.com\/Video\/\">like in this link<\/a>, didn&#8217;t work.Upload your video and WebVTT files at the same time using WordPress&#8217;s Add Media button.<\/p>\n<p>Select the video file and hit the Insert into post button. In Visual View, select the movie, and select &#8220;Edit&#8221; as shown below.<\/p>\n<\/div><\/section><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_full-79ff81c021393065cee878051452f6a6\">\n.flex_column.av-av_one_full-79ff81c021393065cee878051452f6a6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_full-79ff81c021393065cee878051452f6a6 av_one_full  avia-builder-el-2  el_after_av_one_full  el_before_av_one_full  first flex_column_div av-zero-column-padding  column-top-margin'     ><style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-kb2clnu8-21ad75bc54fa34a5e41dd0fd449a0958\">\n.avia-image-container.av-kb2clnu8-21ad75bc54fa34a5e41dd0fd449a0958 img.avia_image{\nbox-shadow:none;\n}\n.avia-image-container.av-kb2clnu8-21ad75bc54fa34a5e41dd0fd449a0958 .av-image-caption-overlay-center{\ncolor:#ffffff;\n}\n<\/style>\n<div  class='avia-image-container av-kb2clnu8-21ad75bc54fa34a5e41dd0fd449a0958 av-styling- avia-align-center  avia-builder-el-3  avia-builder-el-no-sibling '   itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\" ><div class=\"avia-image-container-inner\"><div class=\"avia-image-overlay-wrap\"><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-1007 avia-img-lazy-loading-not-1007 avia_image ' src=\"https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz001-1.png\" alt='Screenshot of editing a page in WordPress, with the mouse cursor hovering over the edit button that\u2019s shaped like a stylized pencil.' title='SafariScreenSnapz001'  height=\"536\" width=\"809\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz001-1.png 809w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz001-1-424x281.png 424w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz001-1-768x509.png 768w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz001-1-468x310.png 468w\" sizes=\"(max-width: 809px) 100vw, 809px\" \/><\/div><\/div><\/div><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_full-79ff81c021393065cee878051452f6a6\">\n.flex_column.av-av_one_full-79ff81c021393065cee878051452f6a6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_full-79ff81c021393065cee878051452f6a6 av_one_full  avia-builder-el-4  el_after_av_one_full  el_before_av_one_full  first flex_column_div av-zero-column-padding  column-top-margin'     ><section  class='av_textblock_section av-kb2cmu26-c6a8aae77b41d49d0c25d29d61564c59 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In the next window, select &#8220;Add Subtitles&#8221;<\/p>\n<\/div><\/section><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_full-79ff81c021393065cee878051452f6a6\">\n.flex_column.av-av_one_full-79ff81c021393065cee878051452f6a6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_full-79ff81c021393065cee878051452f6a6 av_one_full  avia-builder-el-6  el_after_av_one_full  el_before_av_one_full  first flex_column_div av-zero-column-padding  column-top-margin'     ><style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-kb2cp8or-bfce25c923c8f63966cfeb9708ad5feb\">\n.avia-image-container.av-kb2cp8or-bfce25c923c8f63966cfeb9708ad5feb img.avia_image{\nbox-shadow:none;\n}\n.avia-image-container.av-kb2cp8or-bfce25c923c8f63966cfeb9708ad5feb .av-image-caption-overlay-center{\ncolor:#ffffff;\n}\n<\/style>\n<div  class='avia-image-container av-kb2cp8or-bfce25c923c8f63966cfeb9708ad5feb av-styling- avia-align-center  avia-builder-el-7  avia-builder-el-no-sibling '   itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\" ><div class=\"avia-image-container-inner\"><div class=\"avia-image-overlay-wrap\"><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-1005 avia-img-lazy-loading-not-1005 avia_image ' src=\"https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz002.png\" alt='Screen shot of WordPress page with mouse hovering over the &quot;Add Subtitles&quot; link' title='SafariScreenSnapz002'  height=\"588\" width=\"967\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz002.png 967w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz002-424x258.png 424w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz002-768x467.png 768w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz002-468x285.png 468w\" sizes=\"(max-width: 967px) 100vw, 967px\" \/><\/div><\/div><\/div><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_full-79ff81c021393065cee878051452f6a6\">\n.flex_column.av-av_one_full-79ff81c021393065cee878051452f6a6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_full-79ff81c021393065cee878051452f6a6 av_one_full  avia-builder-el-8  el_after_av_one_full  el_before_av_one_full  first flex_column_div av-zero-column-padding  column-top-margin'     ><section  class='av_textblock_section av-kb2cq5ou-aa28b80cfb6bf7c3d3aeef18b4ee4c54 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Select the WebVTT file in your media library, and your video should now have a Closed Caption [CC] button.<\/p>\n<\/div><\/section><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_full-79ff81c021393065cee878051452f6a6\">\n.flex_column.av-av_one_full-79ff81c021393065cee878051452f6a6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_full-79ff81c021393065cee878051452f6a6 av_one_full  avia-builder-el-10  el_after_av_one_full  el_before_av_one_full  first flex_column_div av-zero-column-padding  column-top-margin'     ><style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-kb2ct3oa-239a18b0a137fd3771a68ef4dfbb3550\">\n.avia-image-container.av-kb2ct3oa-239a18b0a137fd3771a68ef4dfbb3550 img.avia_image{\nbox-shadow:none;\n}\n.avia-image-container.av-kb2ct3oa-239a18b0a137fd3771a68ef4dfbb3550 .av-image-caption-overlay-center{\ncolor:#ffffff;\n}\n<\/style>\n<div  class='avia-image-container av-kb2ct3oa-239a18b0a137fd3771a68ef4dfbb3550 av-styling- avia-align-center  avia-builder-el-11  avia-builder-el-no-sibling '   itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\" ><div class=\"avia-image-container-inner\"><div class=\"avia-image-overlay-wrap\"><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-1006 avia-img-lazy-loading-not-1006 avia_image ' src=\"https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz003.png\" alt='Screen shot showing mouse hovering over the BOTLDScene-captions-en.vtt file in the media library tab.' title='SafariScreenSnapz003'  height=\"575\" width=\"942\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz003.png 942w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz003-424x259.png 424w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz003-768x469.png 768w, https:\/\/mark-sweeney.com\/wp-content\/uploads\/2016\/01\/SafariScreenSnapz003-468x286.png 468w\" sizes=\"(max-width: 942px) 100vw, 942px\" \/><\/div><\/div><\/div><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_full-79ff81c021393065cee878051452f6a6\">\n.flex_column.av-av_one_full-79ff81c021393065cee878051452f6a6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_full-79ff81c021393065cee878051452f6a6 av_one_full  avia-builder-el-12  el_after_av_one_full  el_before_av_social_share  first flex_column_div av-zero-column-padding  column-top-margin'     ><section  class='av_textblock_section av-kb2ctu8h-37fd57dcf6a0ddb5aa81999b3825ecff '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Currently, the html version of this (<a href=\"https:\/\/mark-sweeney.com\/Video\/\">https:\/\/mark-sweeney.com\/Video\/<\/a>) works with:<\/p>\n<ul>\n<li>Mac Safari OS X El Capitan<\/li>\n<li>Mac Firefox<\/li>\n<li>iOS 9.2 Safar1<\/li>\n<li>Windows 8.1 Explorer (desktop)<\/li>\n<li>Windows 8.1 Explorer (mobile)<\/li>\n<li>Windows 10 Edge\u00a0(desktop)<\/li>\n<li>Android 5.1<\/li>\n<\/ul>\n<p>I&#8217;ll add more browsers\/platforms to the list as I test them out.<\/p>\n<\/div><\/section><\/div><div  class='av-social-sharing-box av-av_social_share-98ab2f174fe6cac4a642805596fa208b av-social-sharing-box-default  avia-builder-el-14  el_after_av_one_full  avia-builder-el-last  av-social-sharing-box-fullwidth'><div class=\"av-share-box\"><h5 class='av-share-link-description av-no-toc '>Share this entry<\/h5><ul class=\"av-share-box-list noLightbox\"><li class='av-share-link av-social-link-facebook avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Facebook\" href='https:\/\/www.facebook.com\/sharer.php?u=https:\/\/mark-sweeney.com\/?p=968&#038;t=WebVTT%20Closed%20Caption%20Testing' data-av_icon='\ue8f3' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Facebook'><span class='avia_hidden_link_text'>Share on Facebook<\/span><\/a><\/li><li class='av-share-link av-social-link-twitter avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on X\" href='https:\/\/twitter.com\/share?text=WebVTT%20Closed%20Caption%20Testing&#038;url=https:\/\/mark-sweeney.com\/?p=968' data-av_icon='\ue932' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on X'><span class='avia_hidden_link_text'>Share on X<\/span><\/a><\/li><li class='av-share-link av-social-link-whatsapp avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on WhatsApp\" href='https:\/\/api.whatsapp.com\/send?text=https:\/\/mark-sweeney.com\/?p=968' data-av_icon='\uf232' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on WhatsApp'><span class='avia_hidden_link_text'>Share on WhatsApp<\/span><\/a><\/li><li class='av-share-link av-social-link-pinterest avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Pinterest\" href='https:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Fmark-sweeney.com%2F%3Fp%3D968&#038;description=WebVTT%20Closed%20Caption%20Testing&#038;media=https%3A%2F%2Fmark-sweeney.com%2Fwp-content%2Fuploads%2F2016%2F01%2FWebVTT-Captions.png' data-av_icon='\ue8f8' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Pinterest'><span class='avia_hidden_link_text'>Share on Pinterest<\/span><\/a><\/li><li class='av-share-link av-social-link-linkedin avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on LinkedIn\" href='https:\/\/linkedin.com\/shareArticle?mini=true&#038;title=WebVTT%20Closed%20Caption%20Testing&#038;url=https:\/\/mark-sweeney.com\/?p=968' data-av_icon='\ue8fc' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on LinkedIn'><span class='avia_hidden_link_text'>Share on LinkedIn<\/span><\/a><\/li><li class='av-share-link av-social-link-tumblr avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Tumblr\" href='https:\/\/www.tumblr.com\/share\/link?url=https%3A%2F%2Fmark-sweeney.com%2F%3Fp%3D968&#038;name=WebVTT%20Closed%20Caption%20Testing&#038;description=' data-av_icon='\ue8fa' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Tumblr'><span class='avia_hidden_link_text'>Share on Tumblr<\/span><\/a><\/li><li class='av-share-link av-social-link-vk avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Vk\" href='https:\/\/vk.com\/share.php?url=https:\/\/mark-sweeney.com\/?p=968' data-av_icon='\ue926' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Vk'><span class='avia_hidden_link_text'>Share on Vk<\/span><\/a><\/li><li class='av-share-link av-social-link-reddit avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Reddit\" href='https:\/\/reddit.com\/submit?url=https:\/\/mark-sweeney.com\/?p=968&#038;title=WebVTT%20Closed%20Caption%20Testing' data-av_icon='\ue927' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Reddit'><span class='avia_hidden_link_text'>Share on Reddit<\/span><\/a><\/li><li class='av-share-link av-social-link-mail avia_social_iconfont' ><a  aria-label=\"Share by Mail\" href='mailto:?subject=WebVTT%20Closed%20Caption%20Testing&#038;body=https:\/\/mark-sweeney.com\/?p=968' data-av_icon='\ue805' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share by Mail'><span class='avia_hidden_link_text'>Share by Mail<\/span><\/a><\/li><\/ul><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[65,58],"tags":[40,59,41],"class_list":["post-968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","category-closed-captioning","tag-closed-captions","tag-deaf","tag-online-captioning"],"acf":[],"_links":{"self":[{"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/posts\/968","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=968"}],"version-history":[{"count":10,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/posts\/968\/revisions"}],"predecessor-version":[{"id":29879,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/posts\/968\/revisions\/29879"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=\/wp\/v2\/media\/1558"}],"wp:attachment":[{"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mark-sweeney.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}