Embed Video and Audio files in the SharePoint Environment: Part 1
- 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
This article was written in reference to:
How to add a movie player to MOSS – Posted November 17, 2008 – 03:32 AM
How to Achieve Video streaming in SharePoint – Posted February 11, 2009 – 05:41 AM
Guest Author: Ken Cronin
I work for a large company with a very strict authentication based network environment. We have multiple SharePoint portals and no access to the Administration Panel. You could say I am a true end-user administrator in the environment. If you are like me you need to meet your users’ needs by adapting many of the “Standard” SharePoint pieces.
Recorded meetings and video based training programs are being used more than ever in business environments. Clicking on a .WMV file in a document library is one solution but this requires my users to re-authenticate when their Windows Media Player opens. My user base now exceeds 11,000 people so this leads to a whole new host of problems.
My challenge was simple. Create a simple to use, easy to administer, user friendly interface that will not prompt for authentication. Although posting to YouTube and using their embedded link is an option for some, business related materials must be kept “in House” so the sound and video files must be stored and run from SharePoint.
In the end it took some outside the box thinking, some HTML style code and a Content Editor Web Part (CEWP). 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.
To embed a single file player
- Upload the media file 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
Updated code:
<div align=center> <object id="MediaPlayer1" height=230 width=230 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="filename.wmv"> <param name="AutoStart" value="0"> <param name="ShowStatusBar" value="True"> <embed type="application/x-mplayer2" pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"showstatusbar=true> </embed> </object> </div>
- Modify the code to point to your file. Find the line of code that begins with “param name=”FileName” value=” and enter the path to your file between the quotes after value=. You can get this by opening the Document library that contains the file, right click the file name and choose “Copy Shortcut”.
- To adjust the size of the player window modify the height and width settings at 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 file. To prevent distorting your video be sure to match the height and width (or percentage of the height and width). For example if your video is 600 X 400 and you want your player to be 300 pixels wide (50%), set your width to 300 and your height to 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
The player will appear but will not start until you click the play button.
That’s it. It is possible to embed multiple players within a single page either using a single web part or multiple web parts.
Piece of Cake!
In my next installment I will show you how to add a dropdown selection menu that will allow you to view multiple files with a single player.
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
Is it ok or proper to put streaming media files in a SharePoint db (Document Library)? Files such as .wmv, .swf, .flv.
Ken, this is really great, thanks. It took some format tweaking after I copied your code: I had to replace (requote) all quotes as these did not copy correctly, in order to even get the Media Player to show up. Then, to get the buttons (e.g. Play) to do anything I had to place all code within each on the same physical line. As copied, the code ended up exactly as shown above, with line breaks not wrapping. Hope that makes sense (I’m not a programmer).
We looked at this issue before creating the player. In retrospect I should have brought this up in the article.
In our environment I do not have access to a Windows Media Server to stream the video. The player is designed to link outside SharePoint so files can be stored elsewhere and played in the web part.
When the videos are created we use an application that saves compressed and creates a resolution of 704 X 258. This size is more than large enough to display in the web part. This gives us a file size of approximately 7 Megs an hour with the average video lasting 60 to 90 minutes. This small file size is needed for my remote VPN users.
If you are using large files for video I will refer you to 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”
Joan,
Thanks for letting me know. I will work with Mark on the formatting for the next article.
Hi Ken,
I am trying to embed a video on our sharepoint page and after following your instructions, I have managed so far to get the media player on there but for some reason, all I am getting is a green screen running with audio. My file is 37MB, so would it be anything to do with the size of rhe video? or am I missing something?
Thanks,
H
The green screen is a known 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.
Hi Ken,
Thanks for your advice. I went to to a site that helped me get a solution. I am working WMP 9 and all I did was go to Tools, Options, Performance, Advanced and I checked all the boxes under Video Acceleration and DVD Video and it worked like a charm!
Thanks for your help,
H
Joan and Ken – Should be fixed now. The Wordpress formatting had to be tweaked abit. — Mark
Ken, great post – worked out well for me. Can you tell me when part 2 is going to be posted – I’m eager to see the dropdown menu in action! Thanks very much
Thanks for the comment. Part 2 will be submitted to Mark by mid-week. Watch for it to be posted soon.
Hi, is there a way to have an image instead of the black screen? Thanks a lot, Heidi
Not that I have been able to find. The black screen appears to be a placeholder for the video instead of an actual picture.
Did anyone find a way to get a picture out there instead of the black screen?? I have been digging for this for some time and have not found a solution for it. Can it be embedded in the timeline using the software that was used to edit the video?? I did not create ours and do not have access to he editing software so that is why I ask.
Thanks,
Scott
Please excuse the delay in my response. Work has kept me away from posting.
There are 2 options you can use depending upon the overall looking you want.
Option 1 is to wrap the player in a table and set a background image that displays when nothing is playing.
Option 2 is to set an image to “Play” when the page is open and the image will stay on the screen until a video is played.
After the video plays the last frame of the video remains on the screen.
The following code combines both options:
<html>
<head>
</head>
<body>
<table border=0>
<TR>
<TD BACKGROUND=”imagename.jpg”>
<div align=center>
<SELECT id=cancion onchange=document.all.music.filename=document.all.cancion.value; size=1 name=Music>
<OPTION selected>::::: Choose Your Video :::::</OPTION>
<OPTION value=(Movie Name).wmv>Video Name</OPTION>
<OPTION value=(Movie Name).wmv>Video Name</OPTION>
<OPTION value=(Movie Name).wmv>Video Name</OPTION>
</SELECT><BR>
<OBJECT id=music height=230 width=230 classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95>
<PARAM NAME=”AutoStart” VALUE=”true”>
<PARAM NAME=”Filename” VALUE=”imagename.jpg”>
<PARAM NAME=”Mute” VALUE=”0″>
<PARAM NAME=”ShowControls” VALUE=”1″>
<PARAM NAME=”AutoRewind” VALUE=”1″>
<PARAM NAME=”ShowStatusBar” VALUE=”1″>
<PARAM NAME=”ShowTracker” VALUE=”1″>
<param name=”TransparentAtStart” value=”1″>
<PARAM NAME=”WindowlessVideo” VALUE=”1″>
</OBJECT>
</div>
</td>
</tr>
</table>
</body>
</html>
The trick is “Transparentatstart” and “WindowlessVideo” controls
Setting both to 0 will hold the image and last frame of the video on the screen
Setting both to 1 will let the background show thru
The background image is set after the BACKGROUND= tag
The image “Played” is set after PARAM NAME Filename Value
I have included a couple other paramenters to play with.
Note: The player will look normal until the image parameters are added or removed.
Have fun.
Hi,
Can you embed video and audio in Windows SharePoint Services 3.0?
I have used this on our Sharepoint based intranet and it works fine on campus but is not working on some home computers. The only thing I can think of is that it is a browser problem. Does this solution work for any browser or only IE?
Great post…it worked fine except for one thing: now that the video is embedded on my homepage, each visit prompts the secure website pop-up. It wasn’t there before I placed the video and doesn’t appear if I remove the webpart.
i found the issue…if you change all http references to https it goes away…thanks again for the post
Ken, you’re an absolute life saver!! Thank you for this post.
I used your code but changed the file location to point to a video which we have on our Streaming Server. (File:\\servername\sharename\video.wmv).
This allowed the video to stream through SharePoint.
God bless ya!!
Dan
Is it possible to do this with a wav file just for audio, and not have the player open, but juts have the sound file play when an embedded button is clicked?
To use this process, set your height to 75 and set autostart to false. The bottom of the player will appear with the play button.
Ken,
This is a great tutorial. Is there a way to upload a .wmv file to the shared documents section in Sharepoint and have it play in your embedded player? I’m not a devleop, just someone who wants to figure out how to do this. Our company blocks us from viewing videos on the internet (so I don’t think adding the URL in the coding will help), so I can only host our files internally.
Thank you so much!
Will
Will, Thanks for your question.
The player was designed to handle issues such as yours. We have the same issue in our organization regarding video. When you upload the video to a SharePoint site and add the player on the same site you bypass the “Internet” aspect and work within the “Intranet” environment.
To see what I mean, follow the steps above and give it a try but please be aware of any company policies regarding the usage of video in general and any policies regarding the applicability of the content you are distributing.
Ken
Hi Ken,
Sorry, if this does not sound right but… I do not see any code when you say “Paste the following code into the Source Editor Box”. All I see is the media player.
Am I missing something?
Please let me know.
Pete – Should be visible now. — Mark
Hi Ken,
I’ve been trying to use the code from the part 1 to play a single video, but the play button will not work. The mute and volume buttons work fine. do you have any idea of what the problem could be?
i’ve actually downloaded your code on part 2 and got it to play that way, but I have only one video, so the problem lies in them having to ‘pick” the one video.
thanks,
There is an error in the code above. I know Mark has been working hard to get the site back online.
I have posted the correct code here:
Click Here to View Code or right click and save target
Mark if you get a chance please correct what is above.
Thanks
Code was updated. — Mark
Thank you so much for all your help with embedding my video. It worked great and looks awesome.
Thank you all for your help…
I tried to upload the mp3 file from my desktop to my sharepoint site in to my documents library folder.
the isue i am facing is that my mp3 file is not playing on selecting at documet library folder position itself.
it says ” Windows Media Player cannot play the file. If the file is located on the Internet, connect to the Internet. If the file is located a removable storage card, insert the storage card.”
Please help me out in making the file palyable.
Thanks in Advance.
Subha
Is it possible you accidently uploaded a shortcut to the file from your desktop or is the path to the file including the file name extremely long? Open the document library in explorer view and right click the file name. Click properties and verify you uploaded an MP3 file and not a shortcut.
You can also try uploading the file to the root of the document library and see if you can click and play it from there. It that works it is possible your folder names are to long or it is buried within to many folders.
Good Luck.
Thanks Kenneth ,
Sorry for my delayed response..i got caught up with my release so this task was given second priorty .
The file name was too long of 25 characters.
I tried renaming it and uploaded the file and it worked out sucessfuly.
Thanks a lot!!!!!