{"id":16765,"date":"2013-03-29T21:01:36","date_gmt":"2013-03-29T13:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16765"},"modified":"2025-04-04T01:30:39","modified_gmt":"2025-04-03T17:30:39","slug":"web-video-player","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/","title":{"rendered":"How to Create A Web-based Video Player"},"content":{"rendered":"<p>In our previous post, we covered a tutorial on <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/\" rel=\"noopener noreferrer\">how to create an Audio Web Player<\/a>, as well as how to customize its player skin.<\/p>\n<p>This time we are going to do it with video. Yes, we are going to create a Web Video Player. The video player will be embedded using the HTML5 <code>&lt;video&gt;<\/code> element, so technically, any browser with HTML5 compatibility can play this video.<\/p>\n<p>If the browser does not support it, an embedded flash player will be delivered as a fallback, so you need to install the Flash plugin before you are able to play the video. This screenshot below shows the final output of our video player.<\/p>\n<ul class=\"download\">\n<li><a target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/web-video-player\/\" rel=\"noopener noreferrer\">View Demo<\/a><\/li>\n<\/ul>\n<h2>Preparation<\/h2>\n<p>As usual, before we get busy with the code, we need to prepare some stuff first, especially the video. In this tutorial, we will use this video from TED Talk by <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=dvI5JuB6ThE\" rel=\"noopener noreferrer nofollow\">Kelli Anderson<\/a> on Youtube. To download it, you can use this web tool, called <a target=\"_blank\" href=\"https:\/\/keepvid.com\/\" rel=\"noopener noreferrer\">KeepVid.com<\/a>.<\/p>\n<p>For wider browser compatibility, we need to provide two formats of video, MP4 and OGV. By default, when you download videos from Youtube with KeepVid.com you most likely will get the MP4 format. You can use <a target=\"_blank\" href=\"http:\/\/www.mirovideoconverter.com\/\" rel=\"noopener noreferrer nofollow\">Miro Video Converter<\/a> to convert MP4 video to OGV format, it\u2019s available for FREE for both Windows and OS X machine.<\/p>\n<p>Furthermore, we also need an image file for video cover. To create this cover, you can play the video with <a target=\"_blank\" href=\"https:\/\/www.videolan.org\/vlc\/index.html\" rel=\"noopener noreferrer\">VLC<\/a> and then go <strong>Video &gt; Snapshot to take a snapshot of the video<\/strong>. Regarding the user interface icon, we are going to use <a target=\"_blank\" href=\"https:\/\/fontawesome.com\/\" rel=\"noopener noreferrer\">FontAwesome<\/a>. Lastly, we also need <a target=\"_blank\" href=\"https:\/\/www.jplayer.org\/\" rel=\"noopener noreferrer nofollow\">jPlayer<\/a>, <a target=\"_blank\" href=\"https:\/\/jquery.com\/\" rel=\"noopener noreferrer\">jQuery<\/a> to run the video, as well as a new CSS file to store the video skin styles.<\/p>\n<p>After collecting all this, put them in their appropriate folders, as shown below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/folders.jpg\" alt=\"folders\" width=\"371\" height=\"500\"><\/figure>\n<h2>HTML Structure<\/h2>\n<p>Now, create a new HTML document and link the jQuery, <a href=\"https:\/\/www.jplayer.org\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">jPlayer<\/a> libraries as well as the CSS file in the <code>&lt;head&gt;<\/code> section, like so.<\/p>\n<pre>\r\n&lt;link type=\"text\/css\" href=\"css\/style.css\" rel=\"stylesheet\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/jquery.jplayer.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Regarding the HTML structure for our video player, it\u2019s actually similar to the how to <a href=\"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/\">create an Audio Player<\/a> from the previous tutorial.<\/p>\n<p>Only, this time we have a button to turn the video into fullscreen format and a play button at the center of the video. Place this code below inside the <code>&lt;body&gt;<\/code> section.<\/p>\n<pre>\r\n&lt;div id=\"jp_container_1\" class=\"jp-video\"&gt;\r\n    &lt;div class=\"jp-title\"&gt;\r\n      &lt;h1&gt;Kelli Anderson - Disruptive Wonder for a Change&lt;\/h1&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"jp-type-single\"&gt;\r\n      &lt;div id=\"jquery_jplayer_1\" class=\"jp-jplayer\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"jp-gui\"&gt;\r\n        &lt;div class=\"jp-video-play\"&gt;\r\n          &lt;a href=\"javascript:;\" class=\"jp-video-play-icon\" tabindex=\"1\"&gt;&#61515;&lt;\/a&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"jp-interface\"&gt;\r\n          &lt;div class=\"jp-controls-holder\"&gt;\r\n            &lt;ul class=\"jp-controls\"&gt;\r\n              &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-play\" tabindex=\"1\"&gt;&#61515;&lt;\/a&gt;&lt;\/li&gt;\r\n              &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-pause\" tabindex=\"1\"&gt;&#61516;&lt;\/a&gt;&lt;\/li&gt;\r\n              &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-mute\" tabindex=\"1\" title=\"mute\"&gt;&#61480;&lt;\/a&gt;&lt;\/li&gt;\r\n              &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-unmute\" tabindex=\"1\" title=\"unmute\"&gt;&#61478;&lt;\/a&gt;&lt;\/li&gt;\r\n            &lt;\/ul&gt;\r\n            &lt;div class=\"jp-volume-bar\"&gt;\r\n              &lt;div class=\"jp-volume-bar-value\"&gt;&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;ul class=\"jp-toggles\"&gt;\r\n              &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-full-screen\" tabindex=\"1\" title=\"full screen\"&gt;&#61541;&lt;\/a&gt;&lt;\/li&gt;\r\n              &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-restore-screen\" tabindex=\"1\" title=\"restore screen\"&gt;&#61542;&lt;\/a&gt;&lt;\/li&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"jp-progress\"&gt;\r\n            &lt;div class=\"jp-seek-bar\"&gt;\r\n              &lt;div class=\"jp-play-bar\"&gt;&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"jp-current-time\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"jp-no-solution\"&gt;\r\n        &lt;span&gt;Update Required&lt;\/span&gt;\r\n        To play the media you will need to either update your browser to a recent version or update your &lt;a href=\"http:\/\/get.adobe.com\/flashplayer\/\" target=\"_blank\"&gt;Flash plugin&lt;\/a&gt;.\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h3>Activating the Video<\/h3>\n<p>Activating the video is also similar to our previous Audio Player. The only difference is, this time, we need to link the video poster and the supplied formats are now m4v and ogv. Put all these scripts right below the jquery and jplayer links we have added before.<\/p>\n<pre>\r\n&lt;script&gt;\r\n\t$(document).ready(function(){\r\n      $(\"#jquery_jplayer_1\").jPlayer({\r\n        ready: function () {\r\n          $(this).jPlayer(\"setMedia\", {\r\n            m4v: \"vid\/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp4\",\r\n            ogv: \"vid\/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogv\",\r\n            poster: \"vid\/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.png\"\r\n          });\r\n        },\r\n        swfPath: \"\/js\",\r\n        supplied: \"m4v,ogv\"\r\n      });\r\n    });\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>At this stage, our video player still looks plain as shown in the following screenshot.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/first-look.jpg\" width=\"500\" height=\"500\"><\/figure>\n<h2>Adding Styles<\/h2>\n<p>After adding those script, you should now be able to run the video. But, the player still looks unpresentable, so let\u2019s make it nicer by adding styles.<\/p>\n<p>Open up the <code>style.css<\/code> file that we have created earlier in this post.<\/p>\n<p>We will start off by adding the @font-face rule and remove the underlines from all the links.<\/p>\n<pre>\r\n@font-face {\r\n  font-family: \"FontAwesome\";\r\n  src: url('fonts\/fontawesome-webfont.eot');\r\n  src: url('fonts\/fontawesome-webfont.eot?#iefix') format('eot'),\r\n  \t   url('fonts\/fontawesome-webfont.woff') format('woff'), \r\n  \t   url('fonts\/fontawesome-webfont.ttf') format('truetype'), \r\n  \t   url('fonts\/fontawesome-webfont.svg#FontAwesome') format('svg');\r\n  font-weight: normal;\r\n  font-style: normal;\r\n}\r\na {\r\n\ttext-decoration: none;\r\n}\r\n<\/pre>\n<h3>Video Width<\/h3>\n<p>Then, we specify the width of the video container and place it at the center of the browser window, like so.<\/p>\n<pre>\r\n.jp-video {\r\n\tmargin: 0 auto;\r\n\tposition: relative;\r\n\tfont-family: Arial, sans-serif;\r\n}\r\n.jp-video-270p {\r\n\twidth: 480px;\r\n}\r\n<\/pre>\n<h3>Video Title<\/h3>\n<p>We turn the color of the title to dark grey, specify the font-size and align it to the center.<\/p>\n<pre>\r\n.jp-title h1 {\r\n\tfont-size: 1em;\r\n\ttext-align: center;\r\n\tcolor: #555;\r\n}\r\n<\/pre>\n<h3>Play Button<\/h3>\n<p>Then, we style the play button. We place this button at the top over the video and to display the <strong>Play<\/strong> icon, we assign <code>FontAwesome<\/code> font family to it.<\/p>\n<pre>\r\n.jp-video-play {\r\n\tfont-family: \"FontAwesome\";\r\n\tposition: absolute;\r\n\ttop: 45%;\r\n\tleft: 46%;\r\n}\r\n.jp-video-play a {\r\n\tfont-size: 2em;\r\n\tcolor: rgba(255,255,255,.7);\r\n\tdisplay: inline-block;\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tline-height: 55px;\r\n\ttext-align: center;\r\n\tbackground-color: rgba(0,0,0,.8);\r\n\tborder-radius: 5px;\r\n}\r\n<\/pre>\n<h3>Video User Interface<\/h3>\n<p>The User Interface for our video player will look similar. It will have a gradient with the orange color scheme while the icons to control the video, like <strong>the Play, Pause and Volume<\/strong> will be in white.<\/p>\n<pre>\r\n.jp-interface {\r\n\twidth:100%;\r\n\tbottom: 0;\r\n\tposition: relative;\r\n\tbackground: #f34927;\r\n\tbackground: -moz-linear-gradient(top,  #f34927 0%, #dd3311 100%);\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));\r\n\tbackground: -webkit-linear-gradient(top,  #f34927 0%,#dd3311 100%);\r\n\tbackground: -o-linear-gradient(top,  #f34927 0%,#dd3311 100%);\r\n\tbackground: -ms-linear-gradient(top,  #f34927 0%,#dd3311 100%);\r\n\tbackground: linear-gradient(to bottom,  #f34927 0%,#dd3311 100%);\r\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );\r\n\toverflow: hidden;\r\n\t-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);\r\n\tbox-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); \r\n}\r\n\r\n.jp-interface a {\r\n\tcolor: #fff;\r\n\ttext-shadow: 1px 1px 0 rgba(0,0,0,0.3);\r\n}\r\n.jp-controls, .jp-toggles {\r\n\tpadding: 0;\r\n\tmargin: 0; \r\n\tfont-family: \"FontAwesome\"\r\n}\r\n.jp-toggles {\r\n\tposition: absolute;\r\n\ttop: 14px;\r\n\tright: 14px;\r\n}\r\n.jp-controls li, .jp-toggles li {\r\n\tdisplay: inline;\r\n}\r\n.jp-play,.jp-pause {\r\n    width: 55px;\r\n    height: 40px;\r\n    display: inline-block;\r\n    text-align: center;\r\n    line-height: 43px;\r\n}\r\n.jp-mute,.jp-unmute {\r\n    position: absolute;\r\n    right: 85px;\r\n    top: 0;\r\n    width: 20px;\r\n    height: 40px;\r\n    display: inline-block;\r\n    line-height: 43px;\r\n}\r\n.jp-progress {\r\n    background-color: #992E18;\r\n    border-radius: 20px 20px 20px 20px;\r\n    overflow: hidden;\r\n    position: absolute;\r\n    left: 55px;\r\n    top: 14px;\r\n    width: 55%;\r\n    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;\r\n    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;\r\n}\r\n.jp-play-bar {\r\n    height: 12px;\r\n    background-color: #fff;\r\n    border-radius: 20px 20px 20px 20px;\r\n}\r\n.jp-volume-bar {\r\n    position: absolute;\r\n    right: 40px;\r\n    top: 16px;\r\n    width: 45px;\r\n    height: 8px;\r\n    border-radius: 20px 20px 20px 20px;\r\n    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;\r\n    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;\r\n    background-color: #992E18;\r\n    overflow: hidden;\r\n}\r\n.jp-volume-bar-value {\r\n    background-color: #fff;\r\n    height: 8px;\r\n    border-radius: 20px 20px 20px 20px;\r\n}\r\n.jp-current-time {\r\n    color: #FFF;\r\n    font-size: 12px;\r\n    line-height: 14px;\r\n    position: absolute;\r\n    right: 115px;\r\n    top: 13px;\r\n    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);\r\n}\r\n<\/pre>\n<p>At this point, our video player start looking nice, as shown in the following screenshot.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/look-nice.jpg\" alt=\"web video player\" width=\"500\" height=\"330\"><\/figure>\n<h3>Video Fullscreen<\/h3>\n<p>We are able to switch the video to fullscreen. For that reason, we also need to add styles to specifically target when the video is in fullscreen mode, including adjusting the width and the height of the <strong>Play<\/strong> button, the width of the progress bar and the video should be on top of others by specifying the <code>z-index<\/code> larger.<\/p>\n<pre>\r\n.jp-video-full {\r\n\t\/* Rules for IE6 (full-screen) *\/\r\n\twidth:480px;\r\n\theight:270px;\r\n\t\/* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video\/gui. *\/\r\n\tposition:static !important; \r\n\tposition:relative;\r\n}\r\n\/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. *\/\r\n.jp-video-full div div {\r\n\tz-index:1000;\r\n}\r\n.jp-video-full .jp-jplayer {\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tposition: fixed !important; \r\n\tposition: relative; \/* Rules for IE6 (full-screen) *\/\r\n\toverflow: hidden;\r\n}\r\n.jp-video-full .jp-interface {\r\n\tposition: absolute !important;\r\n\tposition: relative; \/* Rules for IE6 (full-screen) *\/\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.jp-video-full .jp-gui {\r\n\tposition: fixed !important; \r\n\tposition: static; \/* Rules for IE6 (full-screen) *\/\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth:100%;\r\n\theight:100%;\r\n\tz-index:1001; \/* 1 layer above the others. *\/\r\n}\r\n\r\n.jp-video-full .jp-video-play a {\r\n\tfont-size: 3em;\r\n\theight: 80px;\r\n\twidth: 80px;\r\n\tline-height: 95px;\r\n}\r\n.jp-video-full .jp-progress {\r\n\twidth: 83%;\r\n}\r\n<\/pre>\n<p>And this is how our video player looks like in fullscreen mode.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/fullscreen.jpg\" alt=\"full screen\" width=\"500\" height=\"330\"><\/figure>\n<h3>Add Shadow<\/h3>\n<p>This is only optional, but I would like to add shadow to make the video player look nicer and more prominent.<\/p>\n<pre>\r\n.jp-video-270p .jp-type-single {\r\n\t-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);\r\n\t-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);\r\n\tbox-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);\r\n}\r\n<\/pre>\n<p>And, that\u2019s all the codes we need, you are now able to see the video and download the file source from the following links.<\/p>\n<ul class=\"download download-2c\">\n<li><a target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/web-video-player\/\" rel=\"noopener noreferrer\">View Demo<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/web-video-player\/\" rel=\"noopener noreferrer\">Download Source<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>In our previous post, we covered a tutorial on how to create an Audio Web Player, as well as how to customize its player skin. This time we are going to do it with video. Yes, we are going to create a Web Video Player. The video player will be embedded using the HTML5 &lt;video&gt;&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create A Web-based Video Player - Hongkiat<\/title>\n<meta name=\"description\" content=\"In our previous post, we covered a tutorial on how to create an Audio Web Player, as well as how to customize its player skin. This time we are going to\" \/>\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.hongkiat.com\/blog\/web-video-player\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create A Web-based Video Player\" \/>\n<meta property=\"og:description\" content=\"In our previous post, we covered a tutorial on how to create an Audio Web Player, as well as how to customize its player skin. This time we are going to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-video-player\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-03-29T13:01:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:30:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/folders.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Create A Web-based Video Player\",\"datePublished\":\"2013-03-29T13:01:36+00:00\",\"dateModified\":\"2025-04-03T17:30:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/\"},\"wordCount\":766,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-video-player\\\/folders.jpg\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/\",\"name\":\"How to Create A Web-based Video Player - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-video-player\\\/folders.jpg\",\"datePublished\":\"2013-03-29T13:01:36+00:00\",\"dateModified\":\"2025-04-03T17:30:39+00:00\",\"description\":\"In our previous post, we covered a tutorial on how to create an Audio Web Player, as well as how to customize its player skin. This time we are going to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-video-player\\\/folders.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-video-player\\\/folders.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-video-player\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create A Web-based Video Player\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create A Web-based Video Player - Hongkiat","description":"In our previous post, we covered a tutorial on how to create an Audio Web Player, as well as how to customize its player skin. This time we are going to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/","og_locale":"en_US","og_type":"article","og_title":"How to Create A Web-based Video Player","og_description":"In our previous post, we covered a tutorial on how to create an Audio Web Player, as well as how to customize its player skin. This time we are going to","og_url":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-03-29T13:01:36+00:00","article_modified_time":"2025-04-03T17:30:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/folders.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Create A Web-based Video Player","datePublished":"2013-03-29T13:01:36+00:00","dateModified":"2025-04-03T17:30:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/"},"wordCount":766,"commentCount":14,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/folders.jpg","articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-video-player\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/","url":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/","name":"How to Create A Web-based Video Player - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/folders.jpg","datePublished":"2013-03-29T13:01:36+00:00","dateModified":"2025-04-03T17:30:39+00:00","description":"In our previous post, we covered a tutorial on how to create an Audio Web Player, as well as how to customize its player skin. This time we are going to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-video-player\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/folders.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-video-player\/folders.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-video-player\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create A Web-based Video Player"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4mp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16765"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16765\/revisions"}],"predecessor-version":[{"id":73582,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16765\/revisions\/73582"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16765"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}