none
Embedding videos in the document RRS feed

  • Question

  • I am able to embed an image when calling setSelectedDataAsync with an <img> tag.

    But, I also need to embed a video in the document. I tried using the HTML5 <video> tag but it doesn't work. I know it's possible to do this via Word 2013 because there is a button called Online Video in the Insert ribbon. I would like to replicate the same insertion programmatically in my Office 2013 (task pane) app.

    Does anyone know how to do this?

    Tuesday, February 5, 2013 9:06 PM

Answers

  • Hi,

    I have an idea.
    setSelectedDataAsync's parameter setting the coercionType to "ooxml" not "html".
    See example below:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
            <script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
            <script>
                Office.initialize = function(reason){}
                $(function(){
                    $("#btnInsertVideo").click(function(){
                        var vdName = "My Video";
                        var vdHtml = '<iframe width="800" height="600" src="http://www.youtube.com/embed/qk51u8-4uo4" frameborder="0" allowfullscreen></iframe>'; //YouTube embed video code
                        //var vdHtml = '<object width="800" height="600"><param name="movie" value="http://i.d.com.com/av/video/embed/player.swf" /><param name="background" value="#333333" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="true" /><param name="FlashVars" value="playerType=embedded&type=id&value=50139900" /><embed src="http://www.cnet.com/av/video/embed/player.swf" type="application/x-shockwave-flash" background="#333333" width="800" height="600" allowFullScreen="true" allowScriptAccess="always" FlashVars="playerType=embedded&type=id&value=50139900" /></object>'; //CNET's embed video code
                        var vdWidth = 800;
                        var vdHeight = 600;
                        insertOnlineVideo(vdName, vdHtml, vdWidth, vdHeight);
                    });
                });
                
                //Insert Online Video
                function insertOnlineVideo(vdName, vdHtml, vdWidth, vdHeight){
                    if(Office.CoercionType.Ooxml){
                        var xmlCode = replaceCode(vdName, escapeHtml(vdHtml), vdWidth, vdHeight);
                        Office.context.document.setSelectedDataAsync(
                            xmlCode,
                            {coercionType:"ooxml"}
                        );
                    }
                }
                
                //Replace OOXML
                function replaceCode(){
                    var i = 0;
                    var args = arguments;
                    var str = $('#xmlcode').val();
                    return str.replace(/@@/g, function(){return args[i++];});
                }
                
                //Escape HTML
                function escapeHtml(str){
                    var elm = document.createElement('pre');
                    if(typeof elm.textContent != 'undefined'){
                        elm.textContent = str;
                    }else{
                        elm.innerText = str;
                    }
                    return elm.innerHTML.replace(/["']/g, '&quot;');
                }
            </script>
        </head>
        <body>
            <input id="btnInsertVideo" type="button" value="Insert Video">
            
    <!-- OOXML Code Start -->
    <textarea id="xmlcode" style="display:none;"><?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <?mso-application progid="Word.Document"?>
    <pkg:package xmlns:pkg="http://schemas.microsoft.com/office/2006/xmlPackage">
      <pkg:part pkg:name="/_rels/.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="512">
        <pkg:xmlData>
          <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
            <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml" />
          </Relationships>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/_rels/document.xml.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="256">
        <pkg:xmlData>
          <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
            <Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="media/image1.png" />
          </Relationships>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/document.xml" pkg:contentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml">
        <pkg:xmlData>
          <w:document mc:Ignorable="w14 w15 wp14" xmlns:wpc="http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" xmlns:w15="http://schemas.microsoft.com/office/word/2012/wordml" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:wpi="http://schemas.microsoft.com/office/word/2010/wordprocessingInk" xmlns:wne="http://schemas.microsoft.com/office/word/2006/wordml" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape">
            <w:body>
              <w:p w:rsidR="00AE3E50" w:rsidRDefault="00DE2072">
                <w:r>
                  <w:drawing>
                    <wp:inline distT="0" distB="0" distL="0" distR="0">
                      <wp:extent cx="2194560" cy="1463040" />
                      <wp:docPr id="1" name="@@" />
                      <wp:cNvGraphicFramePr>
                        <a:graphicFrameLocks noChangeAspect="1" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" />
                      </wp:cNvGraphicFramePr>
                      <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
                        <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
                          <pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
                            <pic:nvPicPr>
                              <pic:cNvPr id="1" name="" />
                              <pic:cNvPicPr />
                            </pic:nvPicPr>
                            <pic:blipFill>
                              <a:blip r:embed="rId2">
                                <a:extLst>
                                  <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
                                    <a14:useLocalDpi val="0" xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" />
                                  </a:ext>
                                  <a:ext uri="{C809E66F-F1BF-436E-b5F7-EEA9579F0CBA}">
                                    <wp15:webVideoPr embeddedHtml="@@" w="@@" h="@@" xmlns:wp15="http://schemas.microsoft.com/office/word/2012/wordprocessingDrawing" />
                                  </a:ext>
                                </a:extLst>
                              </a:blip>
                              <a:stretch>
                                <a:fillRect />
                              </a:stretch>
                            </pic:blipFill>
                            <pic:spPr>
                              <a:xfrm>
                                <a:off x="0" y="0" />
                                <a:ext cx="2194560" cy="1463040" />
                              </a:xfrm>
                              <a:prstGeom prst="rect">
                                <a:avLst />
                              </a:prstGeom>
                            </pic:spPr>
                          </pic:pic>
                        </a:graphicData>
                      </a:graphic>
                    </wp:inline>
                  </w:drawing>
                </w:r>
              </w:p>
            </w:body>
          </w:document>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/media/image1.png" pkg:contentType="image/png" pkg:compression="store">
        <pkg:binaryData>iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAHN6w8ZAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
    jwv8YQUAAAAGUExURQAAAAAAAKVnuc8AAAACdFJOU/8A5bcwSgAAAAlwSFlzAAAOxAAADsQBlSsO
    GwAAAAxJREFUGFdjYBgYAAAAeAABoRR6NAAAAABJRU5ErkJggg==</pkg:binaryData>
      </pkg:part>
    </pkg:package></textarea>
    <!-- OOXML Code End -->
          
        </body>
    </html>


    Thanks,

    kinuasa
    Wednesday, February 13, 2013 7:47 AM

All replies

  • To help try this few steps

    1. insert the video via ribbon button
    2. select the video
    3. in your app call getSelectedDataAsync
    4. review the returned value and check how you can do this


    Anze Javornik

    Tuesday, February 5, 2013 10:17 PM
  • Great idea! I'll give that a shot, thanks. For now, I've resolved to just sticking the video URL in the document as a simple link.
    Tuesday, February 5, 2013 10:40 PM
  • After calling get data, here's the html that was returned:

    <p><a href="http://www.youtube.com/watch?v=cvOQeozL4S0"><span
    style='color:windowtext;text-decoration:none'><img border=0 width=300
    height=165 id="Video 1"
    src="~WRS%7b681CB1DD-867C-4950-B1C6-F7B6793F563B%7d_files/image001.jpg"></span></a></p>

    So, it looks like it's just an <a> tag anyways.

    Wednesday, February 6, 2013 4:31 PM
  • Hi,

    I have an idea.
    setSelectedDataAsync's parameter setting the coercionType to "ooxml" not "html".
    See example below:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
            <script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
            <script>
                Office.initialize = function(reason){}
                $(function(){
                    $("#btnInsertVideo").click(function(){
                        var vdName = "My Video";
                        var vdHtml = '<iframe width="800" height="600" src="http://www.youtube.com/embed/qk51u8-4uo4" frameborder="0" allowfullscreen></iframe>'; //YouTube embed video code
                        //var vdHtml = '<object width="800" height="600"><param name="movie" value="http://i.d.com.com/av/video/embed/player.swf" /><param name="background" value="#333333" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="true" /><param name="FlashVars" value="playerType=embedded&type=id&value=50139900" /><embed src="http://www.cnet.com/av/video/embed/player.swf" type="application/x-shockwave-flash" background="#333333" width="800" height="600" allowFullScreen="true" allowScriptAccess="always" FlashVars="playerType=embedded&type=id&value=50139900" /></object>'; //CNET's embed video code
                        var vdWidth = 800;
                        var vdHeight = 600;
                        insertOnlineVideo(vdName, vdHtml, vdWidth, vdHeight);
                    });
                });
                
                //Insert Online Video
                function insertOnlineVideo(vdName, vdHtml, vdWidth, vdHeight){
                    if(Office.CoercionType.Ooxml){
                        var xmlCode = replaceCode(vdName, escapeHtml(vdHtml), vdWidth, vdHeight);
                        Office.context.document.setSelectedDataAsync(
                            xmlCode,
                            {coercionType:"ooxml"}
                        );
                    }
                }
                
                //Replace OOXML
                function replaceCode(){
                    var i = 0;
                    var args = arguments;
                    var str = $('#xmlcode').val();
                    return str.replace(/@@/g, function(){return args[i++];});
                }
                
                //Escape HTML
                function escapeHtml(str){
                    var elm = document.createElement('pre');
                    if(typeof elm.textContent != 'undefined'){
                        elm.textContent = str;
                    }else{
                        elm.innerText = str;
                    }
                    return elm.innerHTML.replace(/["']/g, '&quot;');
                }
            </script>
        </head>
        <body>
            <input id="btnInsertVideo" type="button" value="Insert Video">
            
    <!-- OOXML Code Start -->
    <textarea id="xmlcode" style="display:none;"><?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <?mso-application progid="Word.Document"?>
    <pkg:package xmlns:pkg="http://schemas.microsoft.com/office/2006/xmlPackage">
      <pkg:part pkg:name="/_rels/.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="512">
        <pkg:xmlData>
          <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
            <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml" />
          </Relationships>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/_rels/document.xml.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="256">
        <pkg:xmlData>
          <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
            <Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="media/image1.png" />
          </Relationships>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/document.xml" pkg:contentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml">
        <pkg:xmlData>
          <w:document mc:Ignorable="w14 w15 wp14" xmlns:wpc="http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" xmlns:w15="http://schemas.microsoft.com/office/word/2012/wordml" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:wpi="http://schemas.microsoft.com/office/word/2010/wordprocessingInk" xmlns:wne="http://schemas.microsoft.com/office/word/2006/wordml" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape">
            <w:body>
              <w:p w:rsidR="00AE3E50" w:rsidRDefault="00DE2072">
                <w:r>
                  <w:drawing>
                    <wp:inline distT="0" distB="0" distL="0" distR="0">
                      <wp:extent cx="2194560" cy="1463040" />
                      <wp:docPr id="1" name="@@" />
                      <wp:cNvGraphicFramePr>
                        <a:graphicFrameLocks noChangeAspect="1" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" />
                      </wp:cNvGraphicFramePr>
                      <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
                        <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
                          <pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
                            <pic:nvPicPr>
                              <pic:cNvPr id="1" name="" />
                              <pic:cNvPicPr />
                            </pic:nvPicPr>
                            <pic:blipFill>
                              <a:blip r:embed="rId2">
                                <a:extLst>
                                  <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
                                    <a14:useLocalDpi val="0" xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" />
                                  </a:ext>
                                  <a:ext uri="{C809E66F-F1BF-436E-b5F7-EEA9579F0CBA}">
                                    <wp15:webVideoPr embeddedHtml="@@" w="@@" h="@@" xmlns:wp15="http://schemas.microsoft.com/office/word/2012/wordprocessingDrawing" />
                                  </a:ext>
                                </a:extLst>
                              </a:blip>
                              <a:stretch>
                                <a:fillRect />
                              </a:stretch>
                            </pic:blipFill>
                            <pic:spPr>
                              <a:xfrm>
                                <a:off x="0" y="0" />
                                <a:ext cx="2194560" cy="1463040" />
                              </a:xfrm>
                              <a:prstGeom prst="rect">
                                <a:avLst />
                              </a:prstGeom>
                            </pic:spPr>
                          </pic:pic>
                        </a:graphicData>
                      </a:graphic>
                    </wp:inline>
                  </w:drawing>
                </w:r>
              </w:p>
            </w:body>
          </w:document>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/media/image1.png" pkg:contentType="image/png" pkg:compression="store">
        <pkg:binaryData>iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAHN6w8ZAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
    jwv8YQUAAAAGUExURQAAAAAAAKVnuc8AAAACdFJOU/8A5bcwSgAAAAlwSFlzAAAOxAAADsQBlSsO
    GwAAAAxJREFUGFdjYBgYAAAAeAABoRR6NAAAAABJRU5ErkJggg==</pkg:binaryData>
      </pkg:part>
    </pkg:package></textarea>
    <!-- OOXML Code End -->
          
        </body>
    </html>


    Thanks,

    kinuasa
    Wednesday, February 13, 2013 7:47 AM
  • Not working in my case, It does not show anything in word document... 

    Error Message: The format of the specified data object is invalid.

    Error Code: 2006

    I'm using office 2016 FYI...


    • Edited by Hiran Desai Wednesday, April 13, 2016 9:26 AM Updated error part
    Wednesday, April 13, 2016 6:36 AM