Adding a Playlist to your HTML Video
Playlist
<--How to add a Playlist Option to Your HTML5 Video Player-->
Open a text editor on your computer like notepad and follow the instructions.
<!--In order to create a playlist option all you need to do is create a second .html page exactly matching your original video webpage and add a menu of videos, 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 playlist menu above the video tags in the page like so.--> <!--The menu can be buttons, text links, or thumbnail photos relating to the linked video.--> <!--the easiest linkable html code would be as follows;--> <!-- Thumbnails <a href="videotobeplayed1"><img src="pathtothumbnail.jpg" height="80" width=80/a> <a href="videotobeplayed2"><img src="pathtothumbnail.jpg" height="80" width=80/a> <a href="videotobeplayed3"><img src="pathtothumbnail.jpg" height="80" width=80/a> <a href="videotobeplayed4"><img src="pathtothumbnail.jpg" height="80" width=80></a> Text Links <a href="videotobeplayed5"><textwithvideoname>/a> <a href="videotobeplayed6"><textwithvideoname>/a> <a href="videotobeplayed7"><textwithvideoname>/a> <a href="videotobeplayed8"><textwithvideoname></a> These playlists will be displayed on top of your video when the playlist link is clicked--> <!--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> <!-- 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 <!--Close Button> <center><INPUT TYPE="button"align="right" VALUE="Close" onClick="history.go(-1);"></center> <!--playlist over video--> <a href="videotobeplayed><img src="pathtothumbnail.jpg" height="80" width=80/a> <a href="videotobeplayed><img src="pathtothumbnail.jpg" height="80" width=80/a> <a href="videotobeplayed><img src="pathtothumbnail.jpg" height="80" width=80/a> <a href="videotobeplayed><img src="pathtothumbnail.jpg" height="80" width=80></a> <!--video tags - place playlist 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 myvidplaylist.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 playlist video webpage "myvidplaylist"--> <!-- 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="myvidplaylist" >playlist</a><center> <!--1- This added link should contain a path to the newly created second webpage "myvidplaylist" with text describing a playlist--> <!--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
playlist
Playlist