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 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 1 of this series, I demonstrated a single audio or video player in SharePoint. The player was frequently used by the site administrators in my environment. So frequently that it took less than 4 weeks for my users to out-grow a single player and request a multi file player.
One of my site administrators asked a simple question: if a single player is possible then why not a multi-file player? How can you argue with that kind of logic? Back to the sandbox. As I stated in the first article, I have used this player for .WMV, .AVI and MP3 files but it will play the file types associated in each individual computer. With my company’s desktop image all 3 work fine.
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. The player is designed to link outside SharePoint so files can be stored elsewhere and played in the web part. In my environment I do not have access to a Windows Media Server to stream the video so we take a different approach.
When the videos are created we use an application that saves the files compressed and creates a resolution of 704 X 258. This size is more than large enough to display in the web part and gives us a file size of approximately 7 Megs an hour with the average video lasting 60 to 90 minutes.
The small file size is needed for my remote VPN users.
If you are using large files please review this article: http://blogs.msdn.com/sharepoint/archive/2007/01/02/is-the-file-server-dead.aspx. This topic is addressed under “Large Audio/Video and Streaming Media and other large archive read only media such as DVDs, CDs storage”
To embed a Multi file player with dropdown menu
- 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
- 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.
- 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. 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. The height and width of a video can be found by looking at the properties of the files. To prevent distorting your video be sure to match the height and width (or percentage of the height and width). For example if your videos are 600 X 400 and you want your player to be 300 pixels wide (50%), set your width to 300 and your height to (50%) 200 pixels. If you want to play an audio only file I find that setting the height to 75 is sufficient to remove the playback window.
- Click OK and modify the Content Editor Web Part options as normal.
- Click OK
<SELECT id=cancion onchange=document.all.music.filename=document.all.cancion.value; size=1 name=Music> <br> <OPTION selected>::::: Choose the Video to Play :::::</OPTION><br> <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video1name.wmv"> Name 1</OPTION><br> <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video2name.wmv"> Name 2</OPTION><br> <OPTION value="http://(Domain)/sites/(Site Name)/Library/Video3name.wmv"> Name 3</OPTION><br> </SELECT><br> <BR> <br> <OBJECT id=music height=230 width=230 classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95> <br> <PARAM NAME="AutoStart" VALUE="true"> <br> </OBJECT>
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. This can be changed by modifying the “Autostart” Value to “false”.
That’s it. No need for multiple players on a single page.
As I always say when it is over, Piece of Cake!
But it is not over. What if you want to separate files into topics and give each topic its own dropdown menu with only one player window on the page?
In the 3rd and last installment I will show you how to create a page with a Single embedded player with multiple dropdown menus.
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
good stuff, can’t wait to see part 3.
I’m a firm believer that beggars should not be choosers… but, when I copy the code from Part 2, all I get is the menu selection and no video player like I had in Part 1. Should the two codes be merged together somehow?
Allyn
The player appears from this piece of the code:
Something may have happened when you copied it.
Please replace what you have with the code above.
Thanks
I have the exact same porblem, my video won’t play, and I just can’t figure out the reasons why,
There are a few things to look at. Can you play the video from your desktop? When the page loads does the player window appear? Is the path to the file correct? Is the file name to long or does it have a period anywhere in the file name? Are ther special characters in the file name? You can try reducing the file name and removing everything but letters/numbers and the extension.
Hope that helps
Ken – Is it all the br tags? Email me a text file of the code and I’ll insert it. — Mark
Thanks… I was originally cutting and pasting to a Word doc so that I could edit the name and link address. That may have been the problem – I cut and pasted directly into the content editor and now everything works great!
Thanks so much!
Allyn
The player and the drop down both appear in the content editor web part but the file selected does not play.
Any guess why?
What tool do you use to save the videos?
In my environment we use Microsoft Live meeting. There are many products like this but I am not sure what their compression ratio is. When I need to manually create Videos for the environment I like Studio 12 (personal choice) but it gives me a 30 Megs per hour output.
Ken,
I followed the steps from Part 2 and I’m able to hear the audio play from the .wmv files, but I am seeing a green screen while the audio is playing. Did I miss a step?
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 Ken. We reduced the video acceleration as well, and that seemed to fix the problem.
Hi there, i found this page through google and this is exactly what i was after!
Unfortunately, I can’t see the code though! Am I doing something wrong? Do i need to sign up?
Please help!
Ajay – Try now. It should be fine. — Mark
Hi Ken,
Is there a way that I can force the first movie in the drop down list to auto start as soon as the page loads?
I have tried adding a value=http://…. within the first tag but it didn’t autoplay when the page first loads.
I have a 1 frame movie that just has a logo on it which I’d like to sit on the player before people choose which proper video they want to watch.
It plays if I pick another movie from the list then click back on the :::Choose the Video to Play:::
Thanks alot for your help.
Andrew
You need to add 1 new parameter and possibly a second.
In the code above, after “PARAM NAME=”AutoStart”…” you add an new statement (remember to put it between a less than and greater than sign so it becomes it’s own entity)..
PARAM NAME=”Filename” VALUE=”Enter URL to file between quotes”
Sometimes a movie will have a blank first frame but the final frame has content. To stop the player so it displays the final frame of your video enter a second parameter, again this too needs to be between it’s own less than and greater than sign so it becomes it’s own entity
PARAM NAME=”AutoRewind” VALUE=”0″
When the player opens and autostart is set to true it immediately plays the file in the filename parameter. This does not affect the dropdown menu or options.
Thanks for the question.
Hello Ken,
First I installed the single video and it worked. Then I tried to install this one with the drop-down list so I could post more videos, and the videos won’t play. Everything looks as it should, but I’m just looking at a blank play screen – using the same video that worked for the single video and then one other. Any idea why they won’t play? Are there permissions that have to be set in Sharepoint? Any help you can offer is appreciated. Thanks!!
Rachel
Nevermind, I got it working! The hyperlink text for the video was typed incorrectly.
Trying to use the suggestion of the autoplay of the video. I have changed the code as suggested, the page loads fine, drop down works fine, videos play fine, but will not auto start when I access the site. I added the parameters as suggested:
Can not see what I am missing on it. The video does not have a blank first frame, but I added the AutoRewind.
Any suggestions?
Sorry code looks like this
” ”
” ”
” “
Thank you for posting this! It’s been great incorporating this on our team page. One problem I’m having though is with using 2 players with single drop down menus. When I have both set up on the same page neither will play. Is there a simple fix to this? Thanks again!
To add a second player to a page you will need to change the “cancion” and “Music” values on one of the players. After you paste in the code change both instances of “cancion” at the top to “cancion2″. Then change all 3 instances of “music” (2 at the top and 1 at the bottom) to “music2″.
This can be repeated multiple times on a single page by changing the number (3,4,5) but the videos will all play at the same time if the user chooses a video from each dropdown at the same time. Because of this I use a single player window with multiple dropdowns. Check out part 3 above.
I’m having problems with this on Mozilla firefox…
Tested on Internet Explorer and worked fine, but with Firefox only the dropdown menu appeared, not the player. Suggestions?
is there a lookup code that can be used so that it finds whatever files are located in a specific folder instead of having to hard code each time a new audio/video file is added?
Hi Ken,
This is excatly what I was looking for. Thanks for posting such info. I replicated the codes on my site and its workign fine. Only issue I face is I have 07 and 08 numbers being diplayed above the video. Not sure how to fix it.
Please help!