Playing and Upload External video

10 posts, 0 answers
  1. Leo
    Leo avatar
    15 posts
    Member since:
    Apr 2011

    Posted 05 Dec 2017 Link to this post

    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,

  2. Rumen
    Admin
    Rumen avatar
    13666 posts

    Posted 05 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Leo
    Leo avatar
    15 posts
    Member since:
    Apr 2011

    Posted 12 Dec 2017 Link to this post

    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 ?

     

  4. Rumen
    Admin
    Rumen avatar
    13666 posts

    Posted 12 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Rumen
    Admin
    Rumen avatar
    13666 posts

    Posted 12 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Leo
    Leo avatar
    15 posts
    Member since:
    Apr 2011

    Posted 12 Dec 2017 Link to this post

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

    Because my application not allow to download video.

     

    Thanks,

  7. Rumen
    Admin
    Rumen avatar
    13666 posts

    Posted 13 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Leo
    Leo avatar
    15 posts
    Member since:
    Apr 2011

    Posted 19 Dec 2017 Link to this post

    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,

     

  9. Rumen
    Admin
    Rumen avatar
    13666 posts

    Posted 20 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Rumen
    Admin
    Rumen avatar
    13666 posts

    Posted 20 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top