{"id":2168,"date":"2018-03-28T03:24:34","date_gmt":"2018-03-28T03:24:34","guid":{"rendered":"https:\/\/home.visualon.info\/?page_id=2168"},"modified":"2019-03-14T00:53:49","modified_gmt":"2019-03-14T00:53:49","slug":"html5-developer-guide","status":"publish","type":"page","link":"https:\/\/www.visualon.com\/index.php\/html5-developer-guide\/","title":{"rendered":"HTML5 Demo Tutorial"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-bottom: 0px;margin-top: 0px;border-width: 0px 0px 0px 0px;border-color:#edeef2;border-style:solid;\" ><div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div class=\"fusion-menu-anchor\" id=\"DRM\"><\/div><link rel=\"stylesheet\"\n href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\">\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script>\n<script>hljs.initHighlightingOnLoad();<\/script>\n<link rel=\"stylesheet\" href=\"\/html5\/codeFont.css\"\/>\n<h2> DRM <\/h2>\n<p> Set media source and DRM information in sourceConfig(link to sourceConfig of API Doc) object.\n\nYou can set multiple streams with different DRM in one object which point to the same media source, VisualOn HTML5+ player will apply the appropriate stream according to the supported DRM type of your browser. That is, it would play link with Fairplay on safari, play link with PlayReady on IE\/EDGE and play link with Widevine on Chrome\/Firefox. If more than one link is supported on current browser, the first one will be chosen.\n\nVisualOn HTML5+ player also supports multiple DRM in one stream, it will choose the supported DRM of the current browser. Please check the example of an object as following:<\/p>\n<\/br>\n<p> Example: <\/p>\n<pre><code class=\"javascript\">\n    links: [\n      {\n          uri: \"myFairplayStream.m3u8\",\n          drm: {\n              fairplay: {\n                  laUrl: 'https:\/\/myfairplay.licenseserver.com\/',\n                  certificateUrl: 'https:\/\/myfairplay.licenseserver.com\/cert',\n                  headers: { 'header1': 'token1', 'header2': 'token2'},\n                  withCredentials: true,\n                  licenseResponseType: 'text',\n                  isResponseBase64Encode: true,\n                  useUint8InitData: false,\n                  buildMessage: function (event, session) {\n                      return JSON.stringify({spc: event.messageBase64Encoded });\n                  },\n                  processLicense: function (responseText) {\n                      return JSON.parse(responseText).ckc;\n                  },\n                  extractContentId: function (contentId) {\n                      var hostname = \"invalid.\";\n                      var pos = contentId.indexOf('skd:\/\/');\n                      if (pos >= 0) {\n                          hostname = contentId.substring(pos + 6);\n                      }\n                      return hostname;\n                  }\n              }\n          },\n          options: {\n              manifestWithCredentials: true,\n              segmentWithCredentials: false\n          }\n      }, {\n          uri: \"myWidevineStream.mpd\",\n          drm: {\n              widevine: {\n                  laUrl: \"https:\/\/mywidevineurl.com\/drm\",\n                  headers: { 'header1': 'token1', 'header2': 'token2'},\n                  withCredentials: false\n              }\n          }\n      }, {\n          uri: \"myPlayreadyStream.mpd\",\n          drm: {\n              playready: {\n                  laUrl: \"https:\/\/myplayreadyurl.com\/drm\"\n               }\n          }\n      }, {\n          uri: \"myClearkeyStream.mpd\",\n          drm: {\n              clearkey: {\n                  keys: { \"1234clear5678key\" : \"fefde00d-efde-adbf-eff1-baadf01dd11d\", \"5678clear1234key\" : \"baadf01dd11d-efde-adbf-eff1-fefde00d\" }\n              }\n          }\n      }, {\n          uri: \"https:\/\/path\/to\/mp4\",\n      }]\n<\/code><\/pre><div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-bottom: 0px;margin-top: 0px;border-width: 0px 0px 0px 0px;border-color:#edeef2;border-style:solid;\" ><div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div class=\"fusion-menu-anchor\" id=\"External-Subtitle\"><\/div><link rel=\"stylesheet\"\n href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\">\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script>\n<script>hljs.initHighlightingOnLoad();<\/script>\n<h2> External Subtitle <\/h2>\n<p> User can set external subtitle via setExternalSubtitle(subtitle) API. The external subtitle can be set before the playback or during the playback. The parameter is externalSubtitleInfo object, please see as following:<\/p>\n<\/br>\n<p> Example: <\/p>\n<pre><code class=\"javascript\">\n    var externalSubtitle =   {\n       uri: 'https:\/\/path\/to\/external\/vtt\/url.vtt',          \n       lang: 'english',           \n       default: true\n    }\n    player.setExternalSubtitle(externalSubtitle);\n<\/code><\/pre><div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-3 nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-bottom: 0px;margin-top: 0px;border-width: 0px 0px 0px 0px;border-color:#edeef2;border-style:solid;\" ><div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div class=\"fusion-menu-anchor\" id=\"Low-Latency\"><\/div><link rel=\"stylesheet\"\n href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\">\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script>\n<script>hljs.initHighlightingOnLoad();<\/script>\n<h2> Low Latency <\/h2>\n<p> VisualOn HTML5+ player provides a lowLatency mode to fit to the situation with high real-time demand. User can enable lowLatency mode by setting the lowLatencyMode as true in \u201c advanced\u201d object of configuration for initializing the player.<\/p>\n<\/br>\n<p> Example: <\/p>\n<pre><code class=\"javascript\">\n    var playerConfig = {\n        playback: {\n            autoPlay: true\n        },\n        advanced: {\n            lowLatencyMode: true\n        },\n        logs: {\n            logToConsole: false\n        }\n    };\n    player.init(playerConfig);\n<\/code><\/pre>\n<p>Now lowLatency mode can only be used on chrome and safari.<\/p><div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-4 nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-bottom: 0px;margin-top: 0px;border-width: 0px 0px 0px 0px;border-color:#edeef2;border-style:solid;\" ><div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-3 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div class=\"fusion-menu-anchor\" id=\"Thumbnail\"><\/div><link rel=\"stylesheet\"\n href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\">\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script>\n<script>hljs.initHighlightingOnLoad();<\/script>\n<h2> Thumbnail <\/h2>\n<p> You can set the WebVTT thumbnail via the tracks in sourceConfig object<\/p>\n<\/br>\n<p> Example: <\/p>\n<pre><code class=\"javascript\">\n      tracks: [{\n          uri: 'https:\/\/path\/to\/thumbnail\/vtt\/url.vtt',\n          type: 'thumbnails'\n      }]\n<\/code><\/pre>\n<p>You can use findNearestThumbnail(pos) to get a thumbniailInfo object of a specific media position.<\/p><div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-5 nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-bottom: 0px;margin-top: 0px;border-width: 0px 0px 0px 0px;border-color:#edeef2;border-style:solid;\" ><div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-4 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div class=\"fusion-menu-anchor\" id=\"Chromecast\"><\/div><link rel=\"stylesheet\"\n href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\">\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script>\n<script>hljs.initHighlightingOnLoad();<\/script>\n<h2> Chromecast <\/h2>\n<p> To enable Chromecast the init(config) must be called successfully. See the following sample code to configure the receiver media player.<\/p>\n<\/br>\n<p> Example: <\/p>\n<pre><code class=\"javascript\">\n    var playerConfig = { \n        autoPlay: true, \n        cast: { \n            receiverAppId : 'B5BCD208' \/\/VisualOn default customer receiver \n        } \n    }; \n    player.init(playerConfig)\n<\/code><\/pre>\n<p>VisualOn HTML5+ player provides custom receiver SDK. If you want to set up your own server to host the receiver by using VisualOn receiver SDK, refer https:\/\/developers.google.com\/cast\/docs\/registration to register your cast application and get the application ID. The analytics data of Chromecast will be sent to your own server, otherwise, to VisualOn default analytics server by using VisualOn default customer receiver which is hosted by VisualOn and the application ID is B5BCD208. The application ID is used with API calls from the sender application.<\/p><div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-2168","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 Developer Guide - VisualOn<\/title>\n<meta name=\"description\" content=\"VisualOn HTML5 Player API Manual. VisualOn HTML5 Player Developer Guide. VisualOn HTML5 Receiver API Manual. VisualOn is a pioneer in video software technology, with many years of experience working with the world\u2019s top device makers and streaming video service providers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.visualon.com\/index.php\/html5-developer-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Developer Guide - VisualOn\" \/>\n<meta property=\"og:description\" content=\"VisualOn HTML5 Player API Manual. VisualOn HTML5 Player Developer Guide. VisualOn HTML5 Receiver API Manual. VisualOn is a pioneer in video software technology, with many years of experience working with the world\u2019s top device makers and streaming video service providers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.visualon.com\/index.php\/html5-developer-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VisualOn\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-14T00:53:49+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@visualoninc\" \/>\n<meta name=\"twitter:site\" content=\"@visualoninc\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.visualon.com\/#website\",\"url\":\"https:\/\/www.visualon.com\/\",\"name\":\"VisualOn\",\"description\":\"Enjoy High-Quality Multimedia Anywhere\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.visualon.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.visualon.com\/index.php\/html5-developer-guide\/#webpage\",\"url\":\"https:\/\/www.visualon.com\/index.php\/html5-developer-guide\/\",\"name\":\"HTML5 Developer Guide - VisualOn\",\"isPartOf\":{\"@id\":\"https:\/\/www.visualon.com\/#website\"},\"datePublished\":\"2018-03-28T03:24:34+00:00\",\"dateModified\":\"2019-03-14T00:53:49+00:00\",\"description\":\"VisualOn HTML5 Player API Manual. VisualOn HTML5 Player Developer Guide. VisualOn HTML5 Receiver API Manual. VisualOn is a pioneer in video software technology, with many years of experience working with the world\\u2019s top device makers and streaming video service providers.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.visualon.com\/index.php\/html5-developer-guide\/\"]}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.visualon.com\/index.php\/wp-json\/wp\/v2\/pages\/2168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.visualon.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.visualon.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.visualon.com\/index.php\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visualon.com\/index.php\/wp-json\/wp\/v2\/comments?post=2168"}],"version-history":[{"count":12,"href":"https:\/\/www.visualon.com\/index.php\/wp-json\/wp\/v2\/pages\/2168\/revisions"}],"predecessor-version":[{"id":3988,"href":"https:\/\/www.visualon.com\/index.php\/wp-json\/wp\/v2\/pages\/2168\/revisions\/3988"}],"wp:attachment":[{"href":"https:\/\/www.visualon.com\/index.php\/wp-json\/wp\/v2\/media?parent=2168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}