Inserting a Video Tag via the Media Manager instead of the default Object/Embed ones
How-To
Insert a Video Tag via the Media Manager instead of the default Object/Embed ones
Description
By default the Media manager works and inserts object/embed tags as the one below:
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="150" height="150" type="application/x-oleobject">
<param name="URL" value="PATH_TO_VIDEO_FILE/RadNavigation.avi"><embed src="PATH_TO_VIDEO_FILE/RadNavigation.avi" width="150" height="150" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer"></object>
The problem that you may experience is that those tags require Windows Media Player plugin to play, which is not supported anymore by Chrome and Firefox.
What you can do is to customize the Media manager to insert a tag instead.
Solution
To do that attach to the OnClientPasteHtml event of the Media Manager and to insert a video tag pointing to the selected video file, instead of an object/embed tag, i.e.
<script type="text/javascript">
function OnClientPasteHtml(sender, args) {
var commandName = args.get_commandName();
//obtain the original content from the Media manager so that we can later obtain the path to of the selected video file
var value = args.get_value();
var videoUrl;
if (commandName == "MediaManager") {
var div = document.createElement("DIV");
Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
//obtain the video file src
if (!$telerik.isIE) {
videoUrl = div.firstChild.childNodes[0].value;
}
else {
videoUrl = div.firstChild.URL;
}
//Create and insert a video tag with the src pointing to the selected in the Media dialog file
args.set_value("<video src=" + videoUrl + " controls=\"controls\" />");
}
}
</script>
<telerik:RadEditor OnClientPasteHtml="OnClientPasteHtml" runat="server" ID="RadEditor1">
<MediaManager ViewPaths="~/Editor/images" UploadPaths="~/Editor/images" SearchPatterns="*.mp4" />
</telerik:RadEditor>
<script type="text/javascript">
//the code below is needed to disable the built-in MozillaKeepFlash content filter of RadEditor, which transforms the object/embed tags to an image in Firefox
Telerik.Web.UI.Editor.MozillaKeepFlash.prototype.getHtmlContent = function (argument) {
return argument;
}
Telerik.Web.UI.Editor.MozillaKeepFlash.prototype.getDesignContent = function (argument) {
return argument;
}
</script>