Adding a Music Player Option to your HTML Video
Music Player
<--How to add a Music Player Option to Your HTML5 Video Player-->
Open a text editor on your computer like notepad and follow the instructions.
<!--In order to create a music player option all you need to do is create a second .html page exactly matching your original video web page and add a music player, then add a link back to the original page. You also need to place a link on the original video webpage.--> <!--Step 1 - Open your html video web page in notepad or a text editor and copy the whole page. Now open a second page in your text editor, paste the copied page and make the following changes--> <!-- always include the javascript and .css files in the head of all pages containing your videos.--> <html <head> <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> </head> <body <!--1 - Install your music player above the video tags in the page like so.--> <!--Be sure you have all rights to the music you ad--> <!--This is my music which I uploaded for free to soundcloud.com and then embeded their player--> <!--It was the best option I found for a quick and easy free music player on my webpage.--> <!--You can find great music on soundcloud.com then create a player to embed--> <!--2 - Next add a close button on top of the player. This code sends the person back to the original video page.--> <!--close button--> <center><INPUT TYPE="button"align="right" VALUE="Close" onClick="history.go(-1);"></center> <!--music player embed--> <iframe width="100%" height="125" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F73853715%3Fsecret_token%3Ds-k7GK2&color=ff6600&auto_play=true&show_artwork=true"></iframe> <iframe width="100%" height="125" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F73854351%3Fsecret_token%3Ds-xoDDb"></iframe> <!--video tags - place player here--> <center><video id="my_player_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="http://standupcomedy.me/videop/560x315 now fits.jpg" data-setup="{}"> <source src="http://standupcomedy.me/video/themesong-sdq.mp4" type='video/mp4'/> <source src="http://standupcomedy.me/video/themesong-sdw.webm" type='video/webm'/> </video></center> <!--3 - Now save the page as something like myvidmusicplayer.html and continue to step 2--> </body> </html> <!--Step 2 - Now go to the original video page in your text editor and simply add a link under the video directing it to the newly created music player video web page "myvidmusicplayer"--> <!-- always include the javascript and .css files in the head of all pages containing your videos.--> <html <head> <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> </head> <body <center><video id="my_player_2" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="http://standupcomedy.me/videop/560x315 now fits.jpg" data-setup="{}"> <source src="http://standupcomedy.me/video/themesong-sdq.mp4" type='video/mp4'/> <source src="http://standupcomedy.me/video/themesong-sdw.webm" type='video/webm'/> </video></center> <!--Add Link--><center><a href="myvidmusicplayer" >music player</a><center> <!--1- This added link should contain a path to the newly created second webpage "myvidmusicplayer" with text describing a music player--> <!--2- Save the page changes and install both pages in your server directory and test. Rember you can always type in the full address of the new page in your browser to test it.--> </body> </html>
Success
Music Player
Music Player