{"id":7,"date":"2023-05-09T12:16:08","date_gmt":"2023-05-09T12:16:08","guid":{"rendered":"https:\/\/dev.annebarrat.com\/wpsandbox\/?page_id=7"},"modified":"2023-08-05T18:01:02","modified_gmt":"2023-08-05T18:01:02","slug":"ablevideo","status":"publish","type":"page","link":"https:\/\/dev.annebarrat.com\/wpsandbox\/","title":{"rendered":"Able Player Plugin for WordPress"},"content":{"rendered":"\n

\n\t\tAble Video and Audio Players\n\t<\/h2>\n

\n\t\tInstructions for Use\n\t<\/h3>\n\t

There are currently two ways to add an Able Player instance to a WordPress site:<\/p>\n

    \n
  1. Enter or paste any valid HTML5 Able Player code into your web page. Full documentation is available on the\u00a0Able Player<\/a>\u00a0project page on GitHub.<\/li>\n
  2. Enter an shortcode. The shortcode is intended for adding videos hosted on YouTube or Vimeo, with captions and subtitles hosted on these services. For anything more complex, use HTML.<\/li>\n<\/ol>\n

    \n\t\tAble Player for Youtube Video, added as HTML, with poster.\n\t<\/h3>\n\t

    The video has a caption and description file added to the media library and\u00a0 linked in the HTML. There is an image added as a video poster.<\/p>\n\t

    \n\t\tAble Player for Vimeo Video, added as HTML\n\t<\/h3>\n\t

    The video has a caption and description file added to the media library and\u00a0 linked in the HTML. Note, to prevent malfunction, an id attribute that is different from the id values of other players on the page must be assigned when adding multiple players to a page as HTML.<\/p>\n\t

    \n\t\tAble Player for local video source, added as HTML and including a non-zero start time.\n\t<\/h3>\n\t

    The video has a caption and description file added to the media library and\u00a0 linked in the HTML. Note, to prevent malfunction, an id attribute that is different from the id values of other players on the page must be assigned when adding multiple players to a page as HTML.<\/p>\n\t

    <track kind=”captions” src=”https:\/\/dev.annebarrat.com\/wpsandbox\/wp-content\/uploads\/2023\/05\/lift.vtt” srclang=”en”><\/p>\n

    <track kind=”descriptions” src=”https:\/\/dev.annebarrat.com\/wpsandbox\/wp-content\/uploads\/2023\/05\/lift_desc_en.vtt” srclang=”en”><\/p>\n

    <\/video><\/p>\n

    \n\t\tAble Player for YouTube Video, added as short code\n\t<\/h3>\n\t

    When adding the player with shortcode, you can only add YouTube or Vimeo videos.<\/p>\n

    Captions must be hosted on these platforms to be included. However, users can add a described version of the video, also hosted on YouTube or Vimeo.<\/p>\n

    Please note that when users add multiple players to the page using shortcode, unique id’s will automatically be assigned to each player to prevent malfunction.<\/p>\nyoutube-desc-id – YouTube ID of a described version of the video
    \nvimeo-desc-id – Vimeo ID of a described version of the video.\n

    Other optional attributes, such as start time, that can be added in the shortcode can be found can be found on the Able Player plugin page.<\/a><\/p>\n\t\r\n

    \n\t\tAble Audio Player: adding an MP3 with HTML\n\t<\/h3>\n\t

    When adding the audio player, a unique ID is required. Add a caption track to enable the transcript to appear.<\/p>\n

    Other optional attributes, such as start time, that can be added in the shortcode can be found can be found on the Able Player plugin page.<\/a><\/p>\n\t

    Piano Concerto No.6 in D major<\/em> (fragment) – Ludwig van Beethoven \/ Nicholas Cook<\/strong><\/p>\n

    Creative Commons Attribution license (reuse allowed)<\/a><\/p>\n\tHTML code:\u00a0<\/strong>\n<audio id=”audio1″ width=”480″ preload=”auto” data-able-player\u00a0 data-lyrics-mode data-heading-level=0\nsource type=”audio\/mpeg” src=”https:\/\/dev.annebarrat.com\/wpsandbox\/wp-content\/uploads\/2023\/05\/cook_en.mp3″\/>\n\u00a0 \u00a0 <track kind=”captions” src=”https:\/\/dev.annebarrat.com\/wpsandbox\/wp-content\/uploads\/2023\/05\/cook.vtt” srclang=”en”>\n<\/audio>\n

    \n\t\tAble Audio Player: adding an MP3 with HTML and a non-zero start time\n\t<\/h3>\n\t

    When adding the audio player, a unique ID is required. Add a caption track to enable the transcript to appear.<\/p>\n

    Other optional attributes, such as start time, that can be added in the shortcode can be found can be found on the Able Player plugin page.<\/a><\/p>\n\t

    BEETHOVEN Piano Sonata No. 21 in C major, Op. 53, Waldstein (1st Movement) \/ Alexander Ullman<\/strong><\/p>\n

    Creative Commons Attribution license (reuse allowed)<\/a><\/p>\n\tHTML code:\u00a0<\/strong>\n<audio id=”audio2″ width=”480″ preload=”auto” data-able-player data-start-time=”500″ data-lyrics-mode data-heading-level=0
    \nsource type=”audio\/mpeg” src=”https:\/\/dev.annebarrat.com\/wpsandbox\/wp-content\/uploads\/2023\/05\/ullman.mp3″\/>
    \n<track kind=”captions” src=”https:\/\/dev.annebarrat.com\/wpsandbox\/wp-content\/uploads\/2023\/05\/ullman_en.vtt” srclang=”en”>
    \n<\/audio>\n

    \n\t\tAble Video Observations\n\t<\/h2>\n\t
      \n
    1. Tested compatibility up to WordPress 5.3.14.<\/li>\n
    2. If the default setting of the plugin is that audio descriptions are both on and the description tray is visible, the settings should be adjusted in the ableplayer.js plugin file.<\/li>\n
    3. Able Player only supports valid WebVTT files. Files may be validated at WebVTT Validator<\/a>.<\/li>\n
    4. The style of the player seems to need some adjustments as the description tray is overlaying the timing bar; and the progress bar overlays the containing track.<\/li>\n
    5. Out of the box, when more than one player is present in a page, they will play simultaneously.<\/li>\n
    6. Whenever editing the Able Players in the page, they become non-visible after saving the changes until the page is refreshed.<\/li>\n
    7. The Able Player increases the accessibility of the Vimeo videos by keeping controls always visible and available to keyboard users and screenreader users.<\/li>\n<\/ol>\n\n","protected":false},"excerpt":{"rendered":"

      Able Video and Audio Players Instructions for Use There are currently two ways to add an Able Player instance to a WordPress site: Enter or paste any valid HTML5 Able Player code into your web page. Full documentation is available on the\u00a0Able Player\u00a0project page on GitHub. Enter an shortcode. The shortcode is intended for adding […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.annebarrat.com\/wpsandbox\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.annebarrat.com\/wpsandbox\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.annebarrat.com\/wpsandbox\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.annebarrat.com\/wpsandbox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.annebarrat.com\/wpsandbox\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":90,"href":"https:\/\/dev.annebarrat.com\/wpsandbox\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/dev.annebarrat.com\/wpsandbox\/wp-json\/wp\/v2\/pages\/7\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/dev.annebarrat.com\/wpsandbox\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}