Встройте видео YouTube с jQuery в IE6 без SWFObject
Вот мой код:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title></title>
<script>
$(document).ready(function(){
$("#video").html('<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/HPPj6viIBmU&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HPPj6viIBmU&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>');
});
</script>
</head>
<body>
<div id="video"></div>
</body>
</html>
Это работает с Firefox и Chrome, но что-то не совсем правильно в IE6. К сожалению, одно из проектных требований поддерживает этот браузер, поэтому даже если он workis в IE7, я должен разработать это.
Я знаю, что существует SWFObject, но я не использовал бы его (мы уже загружаем набор файлов JS, мы не хотим больше).
Даже это не будет работать:
<script>
document.write('<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/HPPj6viIBmU&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HPPj6viIBmU&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>');
</script>
Кажется, что IE6 игнорирует <object> тег, вот код, который он встраивает.
<EMBED src=http://www.youtube.com/v/HPPj6viIBmU&hl=en_US&fs=1& width=480 height=385 type=application/x-shockwave-flash allowfullscreen="true" allowscriptaccess="always"></EMBED>
Существует ли обходное решение?
Спасибо.
4 ответа
Обходной путь, который вы ищете, закончится тем, что вы напишете эквивалент swfobject, за исключением того, что он не будет так хорошо протестирован и так же эффективен. Зачем изобретать велосипед, когда есть совершенно хорошее существующее решение, особенно когда оно уменьшено всего на 10 КБ? Если вы зациклились на том, что не добавляете еще один HTTP-запрос, почему бы не добавить код swfobject на страницу или в другой файл js.
Я никогда не использую ничего, кроме swfobject для встраивания flash.
Помимо использования SWFObject вам придется вручную определить IE и затем использовать
<embed>
Что-то вроде этого:
var isMSIE = /*@cc_on!@*/false;
if(isMSIE)
{
//use embed tag
}
else
{
//use object
}
См: http://kb2.adobe.com/cps/127/tn_12701.html для встраивания и свойств объекта.
Я думаю, что проблема с вашим тегом embed в том, что вы не можете поместить в него переменные Flash. Они должны помещаться в flashvars. В приведенной выше ссылке объясняется, как это сделать. Но лучший способ проверить - дать ему минимальные свойства, а затем добавить больше, чтобы увидеть, что его ломает.
Простой тег embed для IE6 выглядит так:
<embed src="MyFlashMovie.swf" quality="high" width="320" height="240" name ="MyMovieName" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
Для встраивания или объекта Теги, вам иногда нужно использовать методы DOM createElement и insertBefore или appendChild вместо простого написания html с помощью document.write. Когда вы используете методы DOM, он уведомляет браузер о том, что новый элемент добавляется динамически, и браузер должен обработать его, чтобы превратить его в объект плагина. См. Этот букмарклет , который я сделал, чтобы изменить размер объекта Silverlight и вставить его в существующий документ HTML.
Это немного странно, потому что изначально тег object был создан MS для встраивания flash-объектов.
Попробуйте добавить classid-параметр в ваш object-tag, например:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
<param name="movie" value="myContent.swf" />
</object>