Adding a Social Link Option for HTML5 Video
Social Sharing
<--How to add a Social Sharing Option to Your HTML5 Video Player-->
Open a text editor on your computer like notepad and follow the instructions.
<!--In order to create a Social Sharing option all you need to do is create a second .html page exactly matching your original video web page and add social links like Facebook and Twitter. You also need to place a link under the video in the original video web page.--> <!--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> <!--**This code is required by twitter to be in the head--> <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </head> <body <!--**this is reuired by Facebook to be in the body tag--> <body style="background-color:black;"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!--1 - Install your social buttons above the video tags in the page like so.--> <!--**You may need extra coding from sites like Facebook and Twitter added in the page <head or <body--> <!--Simply put them right after the <head or <Body tag--> <!--2 - Next add a close button on top of the social buttons. 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> <!--Social buttons above the video--> <center><div class="fb-like" data-href="http://standupcomedy.me/email" data-send="false" data-width="150" data-show-faces="false" data-colorscheme="dark" data-font="verdana"></div><a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><center> <!--video tags - place social button links 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 myvidsocial.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 type under the original video directing it to the social sharing video webpage "myvidsocial"--> <!-- 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="myvidsocial" >Social Sharing</a><center> <!--1- This added link should contain a path to the newly created second web page "myvidsocial" with text describing -social sharing.--> <!--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
Social Sharing
Social Sharing