Playing and Upload External video

[Leo]

I have upload Video using Media Manager in Editor with size around 50MB, but radeditor slow rendering the video.

How to improve the performance when render the video in radeditor?

I also want to insert external Mp4 Video from our http server not from Youtube / vimeo, how to do that ? Is it possible ?

Perhaps anyone can help me.

Thanks,

[Rumen]

Hi Leo,

The content area of RadEditor is a standard editable iframe/div element (according to the value of the ContentAreaMode property) and the rendering inside it is entirely controlled and done by the browser under which the page is loaded.

If for example the client machine does not have a video card or its hardware performance is not good, you may experience a decrease in the loaded video frames. Can you please provide the video that you are inserting in RadEditor so that I can test it and specify under which browser the issue can be reproduced? 

Best Regards,
Rumen
Progress Telerik

[Leo]

Actually right now i can play video because in IIS not enable yet .mp4 extension.

But the problem right now is video only play in browser IE, chrome and firefox cannot play.

Is it by default or i need install add on ?

 

[Rumen]

Hello,

The problem is that Firefox and Chrome do not support the Windows Media Player plugin. If you load this content 

<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="150" height="150" type="application/x-oleobject">
                <param name="URL" value="/Editor/images/UserDir/PublicRelations/RadNavigation.avi">
                <embed src="/Editor/images/UserDir/PublicRelations/RadNavigation.avi" width="150" height="150" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer">
</object>

you'll get an error that the plugin is not supported.

What you can do is to handle 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. Here is an example:

<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>

Kind Regards,
Rumen
Progress Telerik

[Rumen]

Hi guys, I created a knowledge base resource on the subject: Inserting a Video Tag via the Media Manager instead of the default Object/Embed ones.

Kind regards,
Rumen
Progress Telerik

[Leo]

It's Worked, but how to remove Download function under the video ?

Because my application not allow to download video.

 

Thanks,

[Rumen]

Hi Leo,

To hide the Download button add the controlList attribute to the video tag as shown below:

args.set_value("<video src=" + videoUrl + " controls=\"controls\" controlsList=\"nodownload\" />");

Best regards,
Rumen
Progress Telerik

[Leo]

Dear Rumen,

Actually i still have problem in browser chrome. Some function like upload and download button still problem. Detail problem explained in attached picture.

How to solve the problem ?

Thanks,

 

[Rumen]

Hi,

If you'd like to hide the Upload tab of the Media Manager do not set the UploadPaths property:

<telerik:RadEditor ID="RadEditor1" runat="server">
    <MediaManager ViewPaths="~/media" UploadPaths="do no set this property" />
</telerik:RadEditor>

If you want to allow the mp4 file upload set the SearchPatterns property and enlist the *.mp4 format in the value:

<telerik:RadEditor ID="RadEditor1" runat="server">
    <MediaManager ViewPaths="~/media" UploadPaths="~/media" SearchPatterns="*.mp4,*.mp3" />
</telerik:RadEditor>

Regards,
Rumen
Progress Telerik

[Rumen]

The download video feature of the video media player is a browser feature and it can be disabled in the latest version of Chrome with this attribute: controlsList="nodownload"

Can you please check whether this attribute gets inserted in the content area with the video tag? If it is, then try to display this video tag content outside of RadEditor and see whether your browser interprets it.

As to the not fully uploaded video file, do you experience it with other file formats? Are there any errors in the browser console? Do you experience the problem with smaller files? Have you set the MaxRequestLength property to bigger value in the web.config file?

Best regards,
Rumen
Progress Telerik