{"id":2115,"date":"2017-08-03T00:56:05","date_gmt":"2017-08-03T00:56:05","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=2115"},"modified":"2017-08-03T11:24:18","modified_gmt":"2017-08-03T11:24:18","slug":"playing-video-using-javascript","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/","title":{"rendered":"Playing Video using JavaScript"},"content":{"rendered":"

To play a video clip on a web page, you need to use the <video> element in HTML5 to define the video screen size and the <source> element to refer to the source of the video file. \u00a0Besides, you have to give an id to the video source so that the Javascript function can refer to it.<\/p>\n

For the JavaScript, we use the\u00a0document.getElementById to refer to the video clip. To play the video clip, we use the play method and to pause the video clip, we use the pause method.<\/p>\n

The full script is as follows:<\/p>\n

<!DOCTYPE html> \r\n<html> \r\n<body> \r\n<button onclick=\"playVideo()\" type=\"button\">Play<\/button>\r\n<button onclick=\"pauseVideo()\" type=\"button\">Pause<\/button><br> \r\n<video id=\"myVid\" width=\"400\" height=\"200\">\r\n <source src=\"beach.mp4\" type=\"video\/mp4\">\r\n  Sorry, your browser does not support HTML5 video.\r\n<\/video>\r\n<script> \r\nvar myVideo = document.getElementById(\"myVid\");\r\nfunction playVideo() { \r\n myVideo.play(); \r\n} \r\nfunction pauseVideo() { \r\n myVideo.pause(); \r\n} \r\n<\/script> \r\n<\/body> \r\n<\/html><\/pre>\n
Click Play Video<\/a> to view the output.<\/p>\n","protected":false},"excerpt":{"rendered":"
To play a video clip on a web page, you need to use the <video> element in HTML5 to define the video screen size and the <source> element to refer to the source of the video file. \u00a0Besides, you have to give an id to the video source so that the Javascript function can refer … Continue reading “Playing Video using JavaScript”<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2115","page","type-page","status-publish","hentry"],"yoast_head":"\nPlaying Video using JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Playing Video using JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"To play a video clip on a web page, you need to use the <video> element in HTML5 to define the video screen size and the <source> element to refer to the source of the video file. \u00a0Besides, you have to give an id to the video source so that the Javascript function can refer … Continue reading "Playing Video using JavaScript"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-08-03T11:24:18+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/\",\"name\":\"Playing Video using JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2017-08-03T00:56:05+00:00\",\"dateModified\":\"2017-08-03T11:24:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Playing Video using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Playing Video using JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","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:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Playing Video using JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"To play a video clip on a web page, you need to use the <video> element in HTML5 to define the video screen size and the <source> element to refer to the source of the video file. \u00a0Besides, you have to give an id to the video source so that the Javascript function can refer … Continue reading \"Playing Video using JavaScript\"","og_url":"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-08-03T11:24:18+00:00","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/","url":"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/","name":"Playing Video using JavaScript - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2017-08-03T00:56:05+00:00","dateModified":"2017-08-03T11:24:18+00:00","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/playing-video-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"Playing Video using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=2115"}],"version-history":[{"count":3,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2115\/revisions"}],"predecessor-version":[{"id":2119,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2115\/revisions\/2119"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=2115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}