3

Is it possible to embed a video into a blog site post using a simple URL from the end user's perspective?

I have tried two approaches:

  1. http://blogs.msdn.com/b/kaevans/archive/2010/06/15/embedding-flash-video-in-sharepoint-blogs.aspx

    Everything is deployed to the site and you would think it works but nope! Can't see the video just the URL...I tried two types of vdeo URLs:

    • < iframe width="560" height="315" src="http://www.youtube.com/embed/TE9TpraPlrE?rel=0" frameborder="0" allowfullscreen>< /iframe>
    • < object width="560" height="315" >< param name="movie" value="http://www.youtube.com/v/TE9TpraPlrE?version=3&hl=en_US&rel=0" >< /param >< param name="allowFullScreen" value="true" >< /param >< param name="allowscriptaccess" value="always" >< /param >< embed src="http://www.youtube.com/v/TE9TpraPlrE?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true" >< /embed >< /object >

  2. http://blogs.msdn.com/b/sharepointdesigner/archive/2009/12/11/video-blogging-with-javascript-and-the-media-web-part.aspx

Again everything is fine but again all I get is the video link in the post, not the actual video.

Are there any other options to embed videos in a blog post in SP 2010?

Thanks!

Improve this question

5 Answers 5

Reset to default
1

In the past, I've used jQuery + oEmbed to handle this exact situation -- find link tags that point to videos and attempt to turn them into embedded videos. With this approach, you would just want users to insert links, not the object stuff.

I used jquery-oembed, but I believe there are some other options out there if that doesn't suit your needs.

EDIT #1:

I generally do this kind of thing in the 'implicit' sense (from the site):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>jquery-oembed link replace example</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>   
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
        <script type="text/javascript" src="jquery.oembed.js"></script>
</head>
<body>
<script type="text/javascript">
        $(document).ready(function() {
                $("a.oembed").oembed();
        });
</script>
<div><a href="http://www.flickr.com/photos/14516334@N00/345009210/" class="oembed">Flickr Image</a></div>
<div><a href="http://vimeo.com/3108686" class="oembed">Vimeo Video</a></div>
</body>
</html>

Some quick steps:

  1. Download the plugin and include it in your MasterPage, along with jQuery.
  2. Within a .ready() block, as seen above, target video links and call .oembed() on them.

Of course, the tricky part here is to figure out which links are videos. Checking the domain might work, or potentially extension, depending on what type of videos you use. The easiest way is to add a class to the link, but users can't be expected to figure that one out on their own :P

Improve this answer
1
  • I just looked at jquery-oembed, but I have no idea how that is configured. What do I have to do to use it? Basically I just need to display videos from a linke (could be a link to a SP library)
    – Tudor
    Nov 8, 2012 at 22:26
1

We've build a solution where we use Flowplayer (www.flowplayer.org) because we have firefox, chrome, safari but also mobile/iPad visitors. This syntax works for us on all players:

<video controls="controls" autoplay="autoplay" width="640" height="360">
<source src="https://www.yoursite.com/big_buck_bunny.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="https://www.yousite.com/player/flowplayer-3.2.15.swf" width="640" height="360">
    <param name="movie" value="https://www.yousite.com/player/flowplayer-3.2.15.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':[{'url':'https%3A%2F%2Fwww.yoursite.com%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
</object>

Improve this answer
4
  • Sorry I'm a bit confused...how would this work? Would I need to embed the flowplayer somewhere and then use your code in the post or HTML?
    – Tudor
    Nov 9, 2012 at 17:00
  • yep, you download the (free) version of FlowPlayer, put the .swf file on your server and then use the code with the right references indeed.
    – Bokw
    Nov 9, 2012 at 21:17
  • Thanks! I will give this a try now, I will just add the flowplayer to the SiteAssets library and see if I can get it working.
    – Tudor
    Nov 9, 2012 at 21:30
  • Alright so I can't seem to get it working. I have the .swf file in the SiteAssets files and I changed the URLs in the code you posted. But what is flashVars? How do I paste my URL there? I don't really understand the structure of that line. Thanks for the help! EDIT: Do I need to have the code above in the HTML Source in <script> tags?
    – Tudor
    Nov 9, 2012 at 22:10
1

Figured it out. Basically I followed this blog post and ended up with this code:

try{

//set the html-tag
var objID = "ctl00_MSO_ContentDiv"

//replace [youtube]url[/youtube] tags with corresponding HTML object
 if (document.getElementById(objID).innerHTML.indexOf("[youtube]") > -1) {
     //find all [youtube][/youtube] tags
     var arr = document.getElementById(objID).innerHTML.split("[youtube]");
     var tempSrc = document.getElementById(objID).innerHTML;

     for (j = 0; j < arr.length; j++) {
         //get the url between the [youtube][/youtube] tags
         urltemp = arr[j].substring(0, arr[j].indexOf("[/youtube]"));
         if (urltemp == "") continue;

         //format the URL to the correct format to use with the object-element
         url = urltemp.replace(/<.*?>/g, '').replace("/watch?v=", "/embed/");

         //replace the [youtube][/youtube] tags with the corresponding object-element
         tempSrc = tempSrc.replace("[youtube]" + urltemp + "[/youtube]", "<iframe width='480' height='390' src='"+ url +"' frameborder='0' allowfullscreen></iframe>");
     }

     document.getElementById(objID).innerHTML = tempSrc;
 }


//replace [video]url[/video] tags with corresponding HTML object
 if (document.getElementById(objID).innerHTML.indexOf("[video]") > -1) {
     //find all [video][/video] tags
     var arr = document.getElementById(objID).innerHTML.split("[video]");
     var tempSrc = document.getElementById(objID).innerHTML;

     for (j = 0; j < arr.length; j++) {
         //get the url between the [video][/video] tags
         url = arr[j].substring(0, arr[j].indexOf("[/video]"));
         if (url == "") continue;

         //replace the [video][/video] tags with the corresponding object-element
         tempSrc = tempSrc.replace("[video]" + url + "[/video]", "<object type='application/x-silverlight-2' data='data:application/x-silverlight-2,' width='500' height='333'><param name='source' value='"+ ENTER YOUR SITE ROOT URL HERE +"_layouts/clientbin/mediaplayer.xap'/><param name='initParams' value='displayMode=Inline,mediaTitle= ,mediaSource="+ url +",previewImageSource="+ url.slice(0, -3) +"jpg,mediaFileExtensions=wmv;wma;avi;mpg;mp3;,silverlightMediaExtensions=wmv;wma;mp3;'/><param name='windowless' value='true'/><param name='enableHtmlAccess' value='true'/><param name='minRuntimeVersion' value='2.0.31005.0'/></object> ");
     }

     document.getElementById(objID).innerHTML = tempSrc;
 }

}
catch(err){}

I created a .js file with this code and placed it inside a folder on my server (Style Library for me) and referenced it in the masterpage below the tag and above the tag. The on the blog post just use [youtube][/youtube] to embed a youtube link and [video][/video] to embed a video in Silverlight that is posted somewhere on SharePoint. I have only tried this with MP4 and it works fine, not sure about other file types.

Original source of the scripts: youtube and video

Improve this answer
0

There is another approach for embedding video content into Blog post. It is based on extending of out-of-the-box RTE capabilities in order to allow the insertion of video content into Rich Text field.

Usage

Insert video content (player) into Rich Text field via Ribbon menu

enter image description here

Specify YouTube Video parameters (custom RTE dialog)

enter image description here

Blogs View enter image description here

Please refer post Embedding Video to a SharePoint Library for a more details.

Improve this answer
0

Late to the party but for SP 2010 there's a much easier way detailed here: http://365.webbrewers.com/blog/Lists/Posts/Post.aspx?ID=12

Add an empty div which is allowed and then populate the div with either inner html or append.

And for adding scripts and iframes in SP2013: http://365.webbrewers.com/blog/Lists/Posts/Post.aspx?ID=70

A bit trickier - add a field that renders html and then add that field using jslink.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.