1,804 articles and 14,555 comments as of Monday, February 7th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint (Joel Oleson) content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Thursday, March 19, 2009

Embed Video and Audio files in the SharePoint Environment: Part 3 – Single Embedded Player with Multiple Dropdown Menus

In part two I demonstrated a single dropdown menu that controls an audio or video player in SharePoint.  What if a user wants to separate files into topics?  This is not easy to do with a single dropdown.  You can give each topic its own dropdown menu and player but then you are back to multiple players in a window.

Again I got a simple question: If a player with a dropdown is possible then why not multiple dropdowns and one player?  I love that kind of logic.

An important note about media files:

You need to determine the best place to store the media files based on your specific environment and the size of the files.  Please review part 2 of this series for more information.

To embed a Multi file player with multiple dropdown menus

  1. Upload the media files into a Document Library on your SharePoint site. (Files can be stored at another location as long as your users have access.)
  2. Add a Content Editor Web Part where you want the player to appear.
  3. Open the tool pane (Edit – Modify Shared Web Part)
  4. Click Source Editor
  5. Paste the following code into the Source Editor Box
  6.  

    Note: In the code below I use a basic HTML table to position the dropdowns to the left of the player window.  If you would like the dropdown menus to appear above the player window remove the HTML code.  The code below displays 3 dropdown menus that trigger a single player window.

    <TABLE style="WIDTH:100%" align=center>
    <TBODY>
    <TR>
    <TD>
    <!---- Begin Dropdown 1 ---------->
    <DIV align=center><FONT color=#004080 size=4>Enter Topic 1 Here</FONT></DIV>
    <DIV align=center></DIV>
    <DIV align=center><SELECT id=cancion1 onchange=document.all.music.filename=document.all.cancion1.value; size=1 name=Music1>
    <OPTION selected>::::: Choose the Video to Play :::::</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video1name.wmv">Name 1</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video2name.wmv">Name 2</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video3name.wmv">Name 3</OPTION>
    </SELECT>
    </DIV>
    <!---- End Dropdown 1  ---------->
    <DIV align=center></DIV>
    <DIV align=center></DIV>
    <DIV align=center></DIV>
    <!---- Begin Dropdown 2  ---------->
    <DIV align=center><FONT color=#008040 size=4>Enter Topic 2 Here</FONT></DIV>
    <DIV align=center></DIV>
    <DIV align=center><SELECT id=cancion2 onchange=document.all.music.filename=document.all.cancion2.value; size=1 name=Music2>
    <OPTION selected>::::: Choose the Video to Play :::::</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video1name.wmv">Name 1</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video2name.wmv">Name 2</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video3name.wmv">Name 3</OPTION>
    </SELECT>
    </DIV>
    <!---- End Dropdown 2  ---------->
    <DIV align=center></DIV>
    <DIV align=center></DIV>
    <DIV align=center></DIV>
    <!---- Begin Dropdown 3  ---------->
    <DIV align=center><FONT color=#008040 size=4>Enter Topic 3 Here</FONT></DIV>
    <DIV align=center></DIV>
    <DIV align=center><SELECT id=cancion3 onchange=document.all.music.filename=document.all.cancion3.value; size=1 name=Music3>
    <OPTION selected>::::: Choose the Video to Play :::::</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video1name.wmv">Name 1</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video2name.wmv">Name 2</OPTION>
    <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video3name.wmv">Name 3</OPTION>
    </SELECT>
    </DIV>
    <!---- End Dropdown 3  ---------->
    </TD>
    <TD>
    <!------ Begin Player  --------->
    <OBJECT id=music height=230 width=230 classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95></OBJECT>
    </TD>
    </TR>
    </TBODY>
    </TABLE>
    
  7. In the code above, each of the menus are grouped between ‘begin dropdown’ and ‘end dropdown’ codes.  To add an additional dropdown menu copy/paste the complete code set for Dropdown 3.  In the new code set find the line that begins with “<SELECT id=” and change the three occurrences of 3 to 4.   To add a fifth dropdown copy dropdown 4 and change the 3 occurrences to 5.  To remove a dropdown simply delete an entire code set.
  8. To modify the topic title, size and color that appear above the dropdown menu modify the “<FONT color=#008040 size=4>Enter Topic 3 Here” code in each set.
  9. Now you need to modify the code to point to your files and display the name or topic of the file.   Each file URL, together with the file name gets its own line in the code.  In the code above look at the “option” values for each set of dropdown sets.
    • The first “option” value (OPTION selected) will appear when the page is opened.  You can personalize the text between the > < before the /option code.  Change the existing text between the colons or remove the colons if you prefer.  I add them for aesthetic value. 
    • The 2nd, 3rd and 4th “option” values contain the path to the file and the file names.  Enter the path to your file between the quotes after value=. Enter the text that will appear in the dropdown between the > < before the /option code.
    • I started you with the options to play 3 different files in each dropdown.  If you only want 2 files in the dropdown you can remove the 4th line of code.  To add additional files to the dropdown menu copy/paste additional option lines.  Be sure to copy everything between <OPTION and /OPTION>.  Always keep the option codes together and they will appear in the order entered.
  10. If you store your files on SharePoint you can get the URL to the files by opening the Document library that contains the files, right click the file name and choose “Copy Shortcut”.

  11. To adjust the size of the player window modify the height and width settings near the beginning of the code.  This player is set for height=230 width=230 with the numbers representing pixels. 
  12. Click OK and modify the Content Editor Web Part options as normal.
  13. Click OK

The player will appear when the page loads but will not start until a file is selected from the dropdown menu.  This player is set to automatically play the media when selected.  

Embedding Video and Audio Part 3

That’s it.  Once again, no need for multiple players on a single page.

Thanks for reading and your comments.

 

Ken CroninGuest Author: Ken Cronin

Ken is a Business Analyst on a Learning Technology and Architecture team.  His specialties include collaboration, interactive/virtual desktop environment design and the global distribution of information in a corporate environment.

Ken has been involved with technology and training for more than 20 years.  Want to cause him sleepless nights?  Tell him something can’t be done.  Ken is a consultant for many groups because he understands how different applications and programming languages work together and how to expand/leverage existing applications without increasing costs.

Originally from Massachusetts, Ken now lives in the mountains of Tennessee with his wife Chris and 2 children.

View all entries in this series: KenCronin - Embedding Video and Audio»
Entries in this series:
  1. Embed Video and Audio files in the SharePoint Environment: Part 1
  2. Embed Video and Audio files in the SharePoint Environment: Part 2 - Add a Dropdown Selection Menu
  3. Embed Video and Audio files in the SharePoint Environment: Part 3 - Single Embedded Player with Multiple Dropdown Menus
 

Please Join the Discussion

31 Responses to “Embed Video and Audio files in the SharePoint Environment: Part 3 – Single Embedded Player with Multiple Dropdown Menus”
  1. Robin says:

    Great information.

    For ease of use, is there a way to use a look up list that contains the video locations instead of hard coding into the dropdown list?

  2. Eric says:

    Hmm, I wonder if this could be taken to the next level whereas the menu options are driven from metadata of the videos being stored in a library.

    So like Option 1 is Training, which populates varions metadata for Option 2 based on Training, and then presents a list of available videos in Option 3.

    Like a “drill through” type list. Maybe 4th in the series?

  3. Kenneth Cronin says:

    Until recently that was high on my personal to-do list. Now it is on my “When I have time” list. I know it is possible (Nothing is impossible) but in my environment these players have really taken off. I am seeing presentations cross-linked between sites and larger videos stored on centralized servers so a direct link works best and is the quickest to implement. That also adds a whole new complexity to a drag and drop Meta format. Thanks for the suggestion; I will let you know when I have a solution.

  4. Ken – We have several articles posted here that show how to create a Quote of the Day web part by extracting information from an existing list. You might take a look at that and come up with a very quick solution. — Mark

  5. Paul says:

    Just an FYI – on my browser (IE7), the code above is showing ” instead of ” – anyone else copying / pasting may want to search / replace

  6. Paul says:

    ah – converted in my post above – but you know what I meant – instead of “amper”rdquo;

  7. Kenneth Cronin says:

    I submitted this article using MS Word 2007. It appears when the code was copied out it changed some of the coding. I have re-submitted the code to Mark and he will re-post. Thanks for catching that and thanks Mark for correcting this.

  8. Paul says:

    any ideas on why I only get audio and no video? the main part of the media player just turns green while the audio plays…

  9. Kenneth Cronin says:

    The green screen is a know issue with Windows. It happened on one of my users Dell Laptop and we decreased the Video Acceleration and the issue went away. I am told it can also be a codex issue. It depends upon the operating system you are using and the version of Windows Media Player.

    If you google “windows media player displays green screen” you will see lots of fixes depending upon your OS.

    Sorry I can’t be more help.

  10. Paul says:

    Thanks – changing the acceleration worked for me

  11. Rego says:

    Grate stuff…couple of questions
    1. Is there a code to add to enable the back,next, shufle, repeat, mute and volume buttons from the embedded video?
    2. how to disable the video from looping and auto playing when selected?

    NB: Only experiencing this with .SWF and .FLA files created from Camtasia

  12. Gary says:

    just saw your multiple menu, multiple video SharePoint Environment: Part 3 – Single Embedded Player with Multiple Dropdown Menus”.

    is their a version of this that works with firefox?

    Thanks

    Gary

  13. uttam says:

    hi i am also looking for a lookup field instead of hardcoding the filenames. Lookup will contain all the video and audio file names inside my file share folder. Can it be happened please let me know

  14. Nassima-Algeria says:

    Hi Ken, That’s really great! I had before used your coding to embed one file, now I’ve got more than one :) so needed to try the ‘multi-drop down menu) which i’ve just used and like it to much..
    Thanks a LOT!

  15. Nassima-Algeria says:

    Ken,
    The videos are too small to understand or notice any change in the tutorial, can I just modify the size of the vid from the code? I am trying that now.
    Is it possible to play a video inside a web Part Viewer and create a link to it on a List?

  16. Ajay Murthy says:

    hey guys, tried the code for the single dropdown menu and that works like a charm! Cheers!

    I now want to try this option but am unable to do so as I can’t see the code here!

    Please help!

  17. Shawn says:

    This works perfect in Internet Explorer, but in FireFox, the player does not show up at all and in Google Chrome the player shows up but does not play the selected files. Any thoughts or resources that can help me out with that?

  18. Malay says:

    Hi,

    This doesn’t work in Crome and mozilla. can you help me with this issue. forget about multi file and all. Even simple embed statement for direct file does not work except IE. Any thoughts or solutions for this?

    Thanks in advacne.

  19. shashikanth says:

    Hi,
    I recently gone through your articles its awesome .My question is is there any why to play mutiple types of video file such as avi,wmv,mov and flv . Please let me know

    Thanks
    shahsi

  20. Chanakya says:

    Great!! Thanks a lot. Saved my day!!!

    I created a webpart which will loop through each audio file in the SharePoint library. Instead of drop down I created anchor tags dynamically and added to a table.

    Below is the code which will come in the foreach loop.

    HtmlAnchor an = new HtmlAnchor();
    an.HRef = web.Url.Substring(0, web.Url.IndexOf(”/sites”)) + “/sites/MuzikIdol/Muzik%20Idol%20Custom%20Pages/Audios.aspx#”;

    string str = web.Url.Substring(0, web.Url.IndexOf(”/sites”)) + Convert.ToString(item["ows_ServerUrl"]);
    an.InnerText = Convert.ToString(item["Name"]).Substring(0, Convert.ToString(item["Name"]).LastIndexOf(”.”));
    an.Attributes.Add(”onclick”,”document.all.music1.filename=”+ “‘” + str + “‘” );

    • shashikanth says:

      Hey Chanakya ,

      Can you provide the full code of the webpart. And also your webpart is able to play all the video files such as wmv,mpv and mov. please let me know .thanks in advance

      Thanks,
      Shashi

  21. toucan says:

    I really like this. What i want to do next is set it so it will play one video on load and then different videos on change. I’ve had a go changing the code but can’t get it to work.

    Can anyone help please?

    David

  22. toucan says:

    How could I adapt this so it plays one video on load of the page and then the user can select which video to play?

  23. Kenneth Cronin says:

    toucan:
    The code you want is available in the comments of Part 1 of this series. Rather than republishing the entire code here please click the Part 1 link at the top of this article and review the comments.

    Thanks

  24. Steve says:

    Awesome! Just what I was looking for! My company only authorizes IE across the network so this will be perfect for my needs.

  25. Jim says:

    This is very nice and almost does the trick for me (Firefox and Chrome issues not withstanding). My issue comes in that we’ve created some videos using flash, so the player comes with the video and I end up with two players and their controls. I’d like to be able to do this without having it be player specific. Is that possible? I didn’t know if something can be set differently in the object area or not. I’ve tried a few ways myself that didn’t work. I think not having it player specific might go along with the question about playing different file types as well.

    I’d also like the option to choose from a library as well, but can live with it this way. I wish Chanakya would have provided the entire web part as well.

    Thanks, this is quite good stuff by the way.

Trackbacks

Check out what others are saying about this post...
  1. [...] Embed Video and Audio files in the SharePoint Environment: Part 3 – Single Embedded Player with Mult… [...]

  2. SharePoint Daily for March 20, 2009…

    Top News Stories Microsoft's Elop: It's 'Time to Double Down' on R&D (The Street…

  3. [...] Embed Video and Audio files in the SharePoint Environment: Part 3 – Single Embedded Player wit… [...]




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!