Embed Video and Audio files in the SharePoint Environment: Part 3 – Single Embedded Player with Multiple Dropdown Menus
- Embed Video and Audio files in the SharePoint Environment: Part 1
- Embed Video and Audio files in the SharePoint Environment: Part 2 – Add a Dropdown Selection Menu
- 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
- 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.)
- Add a Content Editor Web Part where you want the player to appear.
- Open the tool pane (Edit – Modify Shared Web Part)
- Click Source Editor
- Paste the following code into the Source Editor Box
- 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.
- 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.
- 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.
- 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.
- Click OK and modify the Content Editor Web Part options as normal.
- Click OK
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>
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”.
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.
That’s it. Once again, no need for multiple players on a single page.
Thanks for reading and your comments.
Guest 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.
- Embed Video and Audio files in the SharePoint Environment: Part 1
- Embed Video and Audio files in the SharePoint Environment: Part 2 - Add a Dropdown Selection Menu
- Embed Video and Audio files in the SharePoint Environment: Part 3 - Single Embedded Player with Multiple Dropdown Menus
on
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?
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?
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.
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
Just an FYI – on my browser (IE7), the code above is showing ” instead of ” – anyone else copying / pasting may want to search / replace
ah – converted in my post above – but you know what I meant – instead of “amper”rdquo;
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.
Done…
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…
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.
Thanks – changing the acceleration worked for me
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
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
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
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!
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?
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!
Ajay – Should be good to go. — Mark
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?
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.
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
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 + “‘” );
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
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
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?
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
Awesome! Just what I was looking for! My company only authorizes IE across the network so this will be perfect for my needs.
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.