как интегрировать jsfiddle в мою веб-страницу

-1

Я пытаюсь использовать следующие jfiddleкак интегрировать jsfiddle в мою веб-страницу

http://jsfiddle.net/karanmhatre/9tny5eh6/6/

на моем сайте, но не могу показаться, чтобы заставить его работать. Я знаю, что эта тема широко обсуждается, и я потратил весь день, пытаясь понять это, но просто не могу понять, что я делаю неправильно. Я новичок и действительно могу помочь!

<!DOCTYPE html> 
<html> 
<head> 
<title>Drag and Drop Video</title> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>  </script> 

<script type="text/javascript"> 

$(window).load(function(){ 

$(document).ready(function(){ 

$(".drag").draggable({ 
    revert: true, 
    containment: "#content" 
}); 
$(".drop").droppable(
{ 
     drop: function (event, ui) 
     { 
      $(".drag").animate({ 
       top: "0px", 
       left: "0px" 
      }); 
     var url = $(ui.draggable).attr('videourl'); 
     var oggurl = $(ui.draggable).attr('oggurl'); 
     var $videocontainer = $('#video-container'); 

     $videocontainer.empty().append('<video id="video" controls width="400" height="300"><source src="'+url+'" type="video/mp4" /><source src="'+oggurl+'" type="video/ogg" /></video>'); 
     $('#video').get(0).play(); 
     } 
}); 
}); 
}); // Closes window.load 

</script> 

<link rel="stylesheet" href="styles/layout.css" media="screen"/> 
</head> 
<body> 

<div class="thumbs"> 
    <img class="drag one-half" videourl="http://www.w3schools.com/html/mov_bbb.mp4" oggurl="profile-amanda.ogv" id="image" src="http://www.bigbuckbunny.org/wp-content/themes/bunny/graphics/header1.jpg" /> 

    <img class="drag one-half last" videourl="http://www.w3schools.com/html/mov_bbb.mp4" oggurl="profile-amanda.ogv" id="image" src="http://www.bigbuckbunny.org/wp-content/themes/bunny/graphics/header2.jpg" /> 
</div> 

<br style="clear:both;" /> 

<div id="video-container" class="drop"> 

</div> 

</body> 
</html>

источник

2016-05-05 Raj

Вам необходимо описать, что вы подразумеваете под «can not, похоже, заставить его работать» - Related: Добро пожаловать в StackOverflow. Пожалуйста, прочитайте нашу страницу [ask], чтобы узнать, как улучшить свой вопрос. Отличный вопрос, как правило, дает более быстрые ответы от сообщества – ochi

Вы хотите вставить фактическую страницу jsFiddle на свою страницу или хотите использовать код jsFiddle на своей странице? Также как побочная заметка, вы не играете как с $ $ (window) .load (function() {'и' $ (document) .ready (function() {' – j08691

Я думаю, что проблема в том, что ваш код загружается JQuery, но скрипка нагрузка как JQuery 1.9.1 И JQuery UI 1.9.2

так попробуйте добавить эту строку сразу после строки, грузы jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

источник

2016-05-05 23:41:03

как интегрировать jsfiddle в мою веб-страницу

ответ

Смежные вопросы