locked
Azure Media Player 2.3.3 : DOMException due to SyntaxError RRS feed

  • Question

  • Hello,

    Have been getting this exception since we moved to AMP 2.3.3.

    How to fix this? Has it been resolved in any future version?

    Saturday, May 30, 2020 10:13 AM

All replies

  • 1. Add Necessary Files
    To use the Azure Media Video Editor(AMVE) you'll first need to add the necessary CSS and JavaScript files to your application. AMVE expects the following files to operate:

    1.1 CSS Files
    amve.min.css
    1.2 Font Files
    All font files must be placed in fonts directory relative to amve.min.css

    amve.eot
    amve.svg
    amve.ttf
    amve.woff
    1.3 JavaScript Files
    amve.min.js
    2. Add CSS and JS References to your Page
    Next we'll need to add the references to the JavaScript and CSS files to your page.

    2.1 JavaScript References
    Add the following JavaScript reference in your page:

    <script src="amve.min.js"></script>
    2.2 CSS References
    Add the following CSS reference to your page after the AMP CSS reference(s) like so:

    <link rel="stylesheet" type="text/css" href="//amp.azure.net/libs/amp/1.7.4/skins/amp-default/azuremediaplayer.min.css" />
    <link rel="stylesheet" type="text/css" href="amve.min.css" />
    3. Add the AMVE Plugin Registration to your AMP Configuration.
    With the requisite references in place, we can now add the plugin registration to our AMP configuration like so:

    3.1 AMVE Plugin Registration
        var myOptions = {
            'nativeControlsForTouch': false,
            autoplay: true,
            controls: true,
            poster: '',
            flashSS: {
                swf: 'tech-wrappers/Players/osmf/StrobeMediaPlayback.2.0.swf',
                plugin: 'tech-wrappers/Players/osmf/MSAdaptiveStreamingPlugin-osmf2.0.swf'
            },
            silverlightSS: {
                xap: 'tech-wrappers/Players/smf/SmoothStreamingPlayer.xap'
            },
            plugins: {
                AMVE: { containerId: 'amve', customMetadataContainerId: 'custommetadata', clipdataCallback: onClipdataCallback, keyboardShortcutConfig: keyboadShortcutConfig }
            }
        };

        var myPlayer = amp('vid1', myOptions);
    4. Add an Element to your Page hold the Editor
    AMVE needs a container element to hold the editor UI DOM that wraps AMP. This element should wrap around the element used for AMP like so:

    4.1 AMVE Container Example
    <div id="amve">
        <video id="vid1" class="azuremediaplayer amp-default-skin amp-big-play-centered">
            <p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
        </video>
    </div>
    5. Optional: Custom Submission Dialog UI - Add a DOM Fragment to Your Page
    You can add a DOM fragment containing custom UI that will be pulled into the submission dialog. To do so, add the DOM fragment as a child of the container element described in section 4. The fragment will be placed into the proper DOM hierarchy by AMVE after AMVE loads. To that end, it is best to set CSS visibility of the fragment to hidden to start. The id for the element is passed to AMVE as the customMetadataContainerId parameter which is further explained in section 8. An example of a custom submission UI dialog fragment is as follows:

    5.1 Custom Submission Dialog UI Example
    <div id="amve">
        <video id="vid1" class="azuremediaplayer amp-default-skin amp-big-play-centered">
            <p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
        </video>
        <div id="custommetadata">
            <hr />
            <label>Test1: </label>&nbsp;<input id="test1" type="text" value="Test 1" /><br>
            <label>Test2: </label>&nbsp;<input id="test2" type="text" value="Test 2" /><br>
            <label>Test3: </label>&nbsp;<input id="test3" type="text" value="Test 3" /><br>
            <label>Test4: </label>&nbsp;<input id="test4" type="text" value="Test 4" />
            <hr/>
            <label>Color: </label><br/>
            <input type="radio" name="colorchoice" value="red" checked> Red<br>
            <input type="radio" name="colorchoice" value="blue"> Blue<br>
            <input type="radio" name="colorchoice" value="green"> Green
            <hr />
            <label>Food: </label><br />
            <input type="checkbox" name="foodchoices" value="breakfast"> Breakfast<br>
            <input type="checkbox" name="foodchoices" value="lunch"> Lunch
        </div>
    </div> 
    6. Clip Submission Callback Function
    Create a function with the signature onClipdataCallback(clipData) that will be called when a clip has been created. A reference to the function will be passed to AMVE as the clipDataCallback parameter described in section 8. The clipData object passed to the callback has all of the data necessary to create a clip using AMS.
    Saturday, May 30, 2020 1:28 PM
  • Thank you for your response!

    We are not currently using Azure Media Video Editor or intend to use it in our application.

    So, instead of adding those specific libraries, would like to know how to fix this error without them.

    Is it possible to only have AMP without Azure Media Video Editor?

    Sunday, May 31, 2020 12:24 AM
  • This looks very similar to your previous post on https://social.msdn.microsoft.com/Forums/en-US/61a38a64-55fe-4547-aed2-e9af01d028bb/azure-media-player-streaming-voicesound-doesnt-end-even-if-amp-is-closed?forum=MediaServices#99ff2431-e9f6-44fd-87f0-2688c6d161a4.  This is not a normal error for AMP.  I'd suggest playing the samples on http://amp.azure.net/libs/amp/latest/docs/samples.html to determine if you see similar problems on that site.  If you do, then the issue is most likely specific to your browser.  If you do not see issues, then the issue may be with your HTML / JavaScript and how you're interacting with AMP.  Try to simplify your code to what works based on the samples.
    Monday, June 1, 2020 3:57 PM