How to add youtube videos to iframe (web-based RTE) with javascript (or jQuery)

StackOverflow https://stackoverflow.com/questions/12100489

题

I would like to create a rich text editor with javascript (jQuery) and HTML that works like the one of "Blogger".

I would like the user of the editor to have the ability to add formatted text (bold, different sizes of fonts etc), add images and add videos from YouTube. The results of my search show that all the web-based RTE use "document.execCommand". Although I found examples for the first two ones (formatted text and images) I didn't find any examples for adding video.

I tried to use this code (function 'test') but doesn't work. After click the button (theVideo) the iframe (texteditor) is empty.

<body onLoad="def()">
    ...
    <input type="button" id="theVideo" value="video..." onClick="test()" />
    ...
</body>

<script type="text/javascript">
function def(){
    var testframe = document.createElement("iframe");
    testframe.name = testframe.id = "textEditor";

    if (testframe.addEventListener){
        testframe.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, false);
    } else if (testframe.attachEvent){
        testframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
    }

    document.body.appendChild(testframe);

    textEditor.document.designMode="on";
    textEditor.document.open();
    html="<head><style type='text/css'>body{ font-family:arial; font-size:13px; }</style> </head>";
}

function test(){
    sembed = "<div>";

    sembed +="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0'"; 
    sembed +="data-thumbnail-src='http://3.gvt0.com/vi/JQu2OSyFZNM/0.jpg' height='266' width='320'>";

        sembed +="<param name='movie' value='http://www.youtube.com/v/JQu2OSyFZNM&fs=1&source=uds' />";

        sembed +="<embed width='320' height='266' src='http://www.youtube.com/v/JQu2OSyFZNM&fs=1&source=uds' type='application/x-shockwave-flash' >";
        sembed +="</embed>";
    sembed +="</object>";

    sembed +="</div>";

    textEditor.document.execCommand("Inserthtml", "", sembed);
}
</script>

Does anyone have any idea how to add videos to iframe? Is there any other solution without using execCommand?

有帮助吗？

解决方案

This code works with Firefox, Chrome, IE. I haven't tested using Opera and Safari

<!DOCTYPE html>
<html>
<head>

<script>
function changeStyle(){
    sembed = "<div>";

         sembed +="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0'"; 
         sembed +="data-thumbnail-src='http://3.gvt0.com/vi/JQu2OSyFZNM/0.jpg' height='266' width='320'>";

              sembed +="<param name='movie' value='http://www.youtube.com/v/JQu2OSyFZNM&fs=1&source=uds' />";

              sembed +="<embed width='320' height='266' src='http://www.youtube.com/v/JQu2OSyFZNM&fs=1&source=uds' type='application/x-shockwave-flash' >";
              sembed +="</embed>";
         sembed +="</object>";

   sembed +="</div>";

   var x=document.getElementById("myframe");
   var y=(x.contentWindow || x.contentDocument);
   if (y.document) y=y.document;

   y.open();
   y.write(sembed);
   y.close();
}

</script>
</head>

<body>

<iframe id="myframe" width=850 height=500>
    <p>Your browser does not support iframes.</p>
</iframe><br /><br />

<input type="button" onclick="changeStyle()" value="Add Video.." />

</body>
</html>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top