{"id":1235,"date":"2023-07-29T22:58:10","date_gmt":"2023-07-29T22:58:10","guid":{"rendered":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/?page_id=1235"},"modified":"2023-07-30T00:19:33","modified_gmt":"2023-07-30T00:19:33","slug":"mp4-player","status":"publish","type":"page","link":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/mp4-player\/","title":{"rendered":"MP4 Player"},"content":{"rendered":"<p class=\"has-text-align-center has-medium-font-size\"><strong>Create multiple players and embed them with a shortcode on any page or post.<\/strong><\/p><p><\/p><p><\/p>\t<div id=\"video_1234\" class=\"wrap-vid\"  style=\"height: 515px;\" >\r\n\t\t<div class=\"vid-slide\">\r\n\t\t\t<div class=\"video-player\"  style=\"height: 515px;\" >\r\n\t\t\t\t\t\t\t\t\t\t<video style=\"height: 515px;\"  preload=\"metadata\" id=\"video1_1234\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/video-1.mp4\" controls playsinline><\/video>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<video style=\"height: 515px;\"  preload=\"metadata\" id=\"video2_1234\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/sea.mp4\" controls playsinline><\/video>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<video style=\"height: 515px;\"  preload=\"metadata\" id=\"video3_1234\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/video3.mp4\" controls playsinline><\/video>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<video style=\"height: 515px;\"  preload=\"metadata\" id=\"video4_1234\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/video2.mp4\" controls playsinline><\/video>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<video style=\"height: 515px;\"  preload=\"metadata\" id=\"video5_1234\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/video-5.mp4\" controls playsinline><\/video>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<div id=\"contrils_1234\" class=\"controls\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"thumb-vp\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" alt=\"Video 1\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/img-video.jpg\" onclick=\"playVideo1234('video1_1234')\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">\r\n\t\t\t\t\t\t\t\t\t\t0:15\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">1<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"dashicons dashicons-controls-play vid-icon\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">1<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">0:15\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Video 1<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"thumb-vp\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" alt=\"Video 2\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/1.jpg\" onclick=\"playVideo1234('video2_1234')\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">\r\n\t\t\t\t\t\t\t\t\t\t0:40\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">2<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"dashicons dashicons-controls-play vid-icon\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">2<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">0:40\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Video 2<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"thumb-vp\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" alt=\"Video 3\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/img-video-3.jpg\" onclick=\"playVideo1234('video3_1234')\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">\r\n\t\t\t\t\t\t\t\t\t\t0:15\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">3<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"dashicons dashicons-controls-play vid-icon\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">3<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">0:15\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Video 3<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"thumb-vp\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" alt=\"Video 4\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/img-video-4.jpg\" onclick=\"playVideo1234('video4_1234')\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">\r\n\t\t\t\t\t\t\t\t\t\t0:10\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">4<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"dashicons dashicons-controls-play vid-icon\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">4<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">0:10\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Video 4<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"thumb-vp\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" alt=\"Video 5\" src=\"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-content\/uploads\/sites\/14\/2023\/07\/img-video-5.jpg\" onclick=\"playVideo1234('video5_1234')\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">\r\n\t\t\t\t\t\t\t\t\t\t0:27\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">5<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"dashicons dashicons-controls-play vid-icon\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vp-count\">5<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"vid-time\">0:27\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Video 5<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t<script>\r\n\t\tfunction playVideo1234(videoNumber) {\r\n\t\t\t\/\/ We are stopping all videos\r\n\t\t\tlet videos1234 = document.getElementById('video_1234').getElementsByTagName('video');\r\n\t\t\tif (!videos1234) return;\r\n\t\t\t\r\n\t\t\tfor (let i = 1; i <= videos1234.length; i++) {\r\n\t\t\t\tif (videos1234[i]) {\r\n\t\t\t\t\t\tvideos1234[i].pause();\r\n\t\t\t\t\t\tvideos1234[i].currentTime = 0;\r\n\t\t\t\t\tvideos1234[i].style.zIndex = \"1\";\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t\/\/ We play the selected video\r\n\t\t\tlet selectedVideo1234 = document.getElementById(videoNumber);\r\n\t\t\tdocument.querySelectorAll('video').forEach(vidc => vidc.pause());\r\n\r\n\t\t\tlet videoPlayed1234 = false;\r\n\t\t\t\r\n\t\t\tif (!videoPlayed1234) {\r\n\t\t\t\tselectedVideo1234.style.zIndex = \"200\";\r\n\t\t\t\t\tselectedVideo1234.play();\r\n\t\t\t\tvideoPlayed1234 = true;\r\n\t\t\t\t} else {\r\n\t\t\t\tconsole.log(\"Video already played\");\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\t\/\/ Image Slider \r\n\t\tfunction seosCheckPosition1234() {\r\n\t\t\tlet x1234;\r\n\t\t\tif (window.matchMedia('(max-width: 800px)').matches) {\r\n\t\t\t\tx1234 = \"1\";\r\n\t\t\t\treturn x;\r\n\t\t\t\t} else {\r\n\t\t\t\tx1234 = \"4\";\r\n\t\t\t\treturn x1234;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t\/\/ Get all elements with class \"thumb-vp\"\r\n\t\tlet thumbElements1234 = document.getElementsByClassName('thumb-vp');\r\n\t\tlet iconElements1234 = document.getElementsByClassName('vid-icon');\r\n\t\t\r\n\t\t\/\/ Add click event listener to each element\r\n\t\tfor (let i = 0; i < thumbElements1234.length; i++) {\r\n\t\t\tthumbElements1234[i].addEventListener('click', function() {\r\n\t\t\t\t\/\/ Remove 'active' class from all elements\r\n\t\t\t\tfor (let j = 0; j < thumbElements1234.length; j++) {\r\n\t\t\t\t\tthumbElements1234[j].classList.remove('active');\r\n\t\t\t\t}\r\n\t\t\t\t\/\/ Add 'active' class to the clicked element\r\n\t\t\t\tthis.classList.add('active');\r\n\t\t\t\t\r\n\t\t\t\t\/\/ Reset the color of all icon elements to the default\r\n\t\t\t\tfor (let k = 0; k < iconElements1234.length; k++) {\r\n\t\t\t\t\ticonElements1234[k].style.color = ''; \/\/ Reset to default color\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/\/ Find the icon element within the clicked element and change its color\r\n\t\t\t\tlet iconElement = this.querySelector('.vid-icon');\r\n\t\t\t\tif (iconElement) {\r\n\t\t\t\t\ticonElement.style.color = '#ff0000'; \/\/ Change the color to your desired color\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t\tfunction seosCheckPositionVP1234() {\r\n\t\t\tlet x;\r\n\t\t\tif (window.matchMedia('(max-width: 900px)').matches) {\r\n\t\t\t\tx =\"1\";\r\n\t\t\t\treturn x;\r\n\t\t\t\t} else {\r\n\t\t\t\tx = \"4\";\r\n\t\t\t\treturn x;\r\n\t\t\t}\r\n\t\t}\r\n\t\tjQuery('#contrils_1234').not('.slick-initialized').slick({\r\n\t\t\tslidesToShow: seosCheckPositionVP1234(),\r\n\t\t\tslidesToScroll: 1,\r\n\t\t\tautoplay: false,\r\n\t\t\tautoplaySpeed: 7000,\r\n\t\t});\r\n\t\t\r\n\t<\/script>\r\n\t","protected":false},"excerpt":{"rendered":"<p>Create multiple players and embed them with a shortcode on any page or post.<\/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-1235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-json\/wp\/v2\/pages\/1235"}],"collection":[{"href":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":8,"href":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-json\/wp\/v2\/pages\/1235\/revisions"}],"predecessor-version":[{"id":1244,"href":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-json\/wp\/v2\/pages\/1235\/revisions\/1244"}],"wp:attachment":[{"href":"https:\/\/seosthemes.info\/music-and-video-wordpress-theme\/wp-json\/wp\/v2\/media?parent=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}