I uploaded videos to the server and saved the videopath and imagepath into the database. Now I want to show the video lists on my homepage. I wrote the code, the player for streaming the video is appeared but not the list of the videos.
the codes are -
C# Code Behind -
[WebMethod]
public static List<Video> loadVideo(string value)
{
IList<Video> video = VideoManager.GetHomePageVideo();
if (video == null)
{
video = new List<Video>();
}
return video.ToList();
}
And the HTML and JavaScript Code for -
PageMethods.loadVideo('', loadVideoSuccess);
function loadVideoSuccess(result) {
$("#dvVideo").html('');
var html = '';
for (var i = 0; i < result.length; i++) {
html += "<div style=\" border: solid 1px gray;\">";
html += "<a style=\"cursor: pointer;\" onclick=\"LoadVideo('" + result[i].VideoPath.split('/')[1] + "');\"><img src=\"" + result[i].ImagePath + "\" width=\"70\" style=\"background-color:black;\" />" + resul[i].Title + "</a>";
//html += " :: <a href=\"Pages/Gallery/Videos.aspx?videoId=" + result[i].ID + " " + result[i].Title + </a>;
html += "</div>";
}
$("#dvVideo").append(html);
}
<div class="widget-main">
<div class="widget-main-title">
<h4 class="widget-title">Latest Videos</h4>
</div>
<div class="widget-inner" id="dvVideo">
<div style="">
<div id="myElement">Loading the player...</div>
</div>
</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "Uploads/Ar_Rahman_Edited.mp3",
image: "video/RoboCop.jpg",
height: 320,
width: 332,
skin: "jwplayer-skins/six.xml"
});
function loadVideo(file) {
var filename = 'Uploads/' + file;
jwplayer("myElement").setup({
file: filename,
image: "video/RoboCop.jpg",
height: 320,
width: 332,
autostart: true,
skin: "jwplayer-skins/six.xml"
});
}
</script>
</div>
Now please help me why it is not showing the video list on my homepage ? What should I do for it?
Please try the link below and try that way and please don't try mix and mess up html and javascript together. Keep both separate.
//http://jsfiddle.net/ramp/nF7Mw/
Related
I have loaded Playlist items in my Home Page like this:
HTML:
<div id="youtube-playlist-feed_1"></div>
<div id="youtube-playlist-feed_2"></div>
<div id="youtube-playlist-feed_3"></div>
My Script to load Playlist is:
var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;
var playlists = [{
playlistId: 'PLJYHm_ZxWCKnQmapkDs7x47jkr-nw3l50',
el: '#youtube-playlist-feed_1'
},
{
playlistId: 'PLJYHm_ZxWCKmIBkoopKFK4kTTOmC1Zof0',
el: '#youtube-playlist-feed_2'
},
{
playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
el: '#youtube-playlist-feed_3'
}
];
playlists.forEach(function(playlist) {
getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
})
function getVideoFeedByPlaylistId(playlistId, el) {
$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
$.each(data.items, function(i, item) {
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
});
$(el).html(htmlString);
htmlString = '';
});
}
Now, I have a separate page i.e. Player.html where I would like to have a YouTube Player and load the videos. For example, if a user clicks on 1st item of the playlist, that should be loaded in Player.html where I have my YouTube Player. How can I achieve this?
In Your script where you are loading playlist items replace this code just htmlString
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="#" onclick="player()"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="#" onclick="player()">' + title + '</a></div></div><input type="text" name="videoid" id="videoid" value="'+videoID+'" hidden>';
At the end of Index.html file:
Past this code:
<script type="text/javascript">
function player() {
var ID = document.getElementById('videoid').value;
document.location.href = 'player.html?vid='+ID;
}
</script>
And in your player.html file
<div id="display"></div>
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
document.getElementById('display').innerHTML = output;
}
</script>
First of all pass VideoID in a href by writing this as a href
<div class="video-wrap"><div class="video">
<a target="_blank" href="player.php?id=' + videoID+ '">
<img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a>
</div>' + '<div class="title"><a target="_blank" href="player.php?id=' + videoID+ '">' + title + '</a></div></div>
Now in Player.php
Use GET method to get your id variable
like : $id = $_GET['id'];
in this file use this code to play video
<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $id; ?>" frameborder="0" allowfullscreen></iframe>
In Your Videos displaying html file
you have to write something like this:
<a onclick="player()" >Watch</a>
<script type="text/javascript">
function player() {
videoid = 'a9Vh9TZkdSM'; //Your Video id
document.location.href = 'player.html?vid='+videoid;
}
</script>
And in
Player.html
Something like this:
<div id="display"></div>
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>';
document.getElementById('display').innerHTML = output;
}
</script>
Im pulling items from a JSON file. I have a class called "showProduct" and once clicked it executes a function and shows the item information on the page. I am trying to call this same function again later in my code on the similar product. I need the page to refresh with that new items contents. Below is my code really hope someone can help me out im not sure what I am doing wrong. I did not include the JSON but i hope just by looking at the class and my code someone will know why it wont work.
function openNav() {
document.getElementById("productsSideBar").style.width = "250px";
}
function closeNav() {
document.getElementById("productsSideBar").style.width = "0";
}
'use strict';
$.ajax({
dataType: "jsonp",
url: '',
success: function(json){
//check for window hash and display appropriate product category
var currentHash = window.location.hash;
switch(currentHash)
{
case '#tomatoes':
displayTomatoes();
break;
default:
displayAll();
break;
}
//display all products function
function displayAll() {
var categoryImage = '';
$.each(json, function (i, item) {
if (item.itemBrandLetter == "C") {
categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '' + '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '' + '</div>';
}
});
$('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow');
//show individual product function on click
$(".showProduct").click(function(event){
//hide all current products
$('#productCategories').hide();
//get passed data from other function
var clickedItemName = '<h1>' + $(this).data('itemname') + '</h1>';
var clickedItemUPC = $(this).data('itemupc');
var clickedItemOZ = '<h2>' + $(this).data('itemoz') + '</h2>';
var clickedItemDescription = '<p>' + $(this).data('itemdescription') + '</p>';
var clickedItemImage = '<img class="img-responsive img-rounded center-block" src="' + $(this).data('itemimage') + '">';
var clickedItemGluten = $(this).data('itemgluten');
var clickedItemBPA = $(this).data('itembpa');
var clickedItemGMO = $(this).data('itemgmo');
var clickedItemPageURL = $(this).data('itempageurl');
//check if clicked data equals correct item
$.each(json, function (i, item) {
if (item.itemName === clickedItemName) {
clickedItemName
}
if (item.itemFullUPC === clickedItemUPC) {
clickedItemUPC
}
if (item.itemPackSize === clickedItemOZ) {
clickedItemOZ
}
if (item.itemDescription === clickedItemDescription) {
clickedItemDescription
}
if (item.imageURL === clickedItemImage) {
clickedItemImage
}
if (item.itemGlutenFree === clickedItemGluten) {
clickedItemGluten
}
if (item.itemBPAFree === clickedItemBPA) {
clickedItemBPA
}
if (item.itemGMOFree === clickedItemGMO) {
clickedItemGMO
}
//assign window hash to each product
if (item.itemName === clickedItemPageURL) {
event.preventDefault();
clickedItemPageURL = clickedItemPageURL.replace(/\s/g, '');
window.location.hash = clickedItemPageURL;
}
});
//remove extra characters from UPC
var originalUPC = clickedItemUPC;
var strippedUPC = '<h2>' + originalUPC.slice(1, -1); + '</h2>';
//show individual product information
$('#productSocialShare').show();
$('#individualProduct').show();
$('#relatedProducts').show();
//append product information to appropriate DIV
$('#productTitle').html(clickedItemName);
$('#productUPC').html(strippedUPC);
$('#productOZ').html(clickedItemOZ);
$('#productDescription').html(clickedItemDescription);
$('#productImage').html(clickedItemImage);
//check if gluten free is true and show image
if (clickedItemGluten == "Y") {
clickedItemGluten = '<img class="img-responsive img-rounded img-margin" src="../images/misc/gluten_free_test.jpg">';
$('#productGlutenFree').html(clickedItemGluten);
$('#productGlutenFree').show();
} else {
$('#productGlutenFree').hide();
}
//check if bpa free is true and show image
if (clickedItemBPA == "Y") {
clickedItemBPA = '<img class="img-responsive img-rounded img-margin" src="../images/misc/bpa_free_test.jpg">';
$('#productBPAFree').html(clickedItemBPA);
$('#productBPAFree').show();
} else {
$('#productBPAFree').hide();
}
//check if gmo free is true and show image
if (clickedItemGMO == "Y") {
clickedItemGMO = '<img class="img-responsive img-rounded img-margin" src="../images/misc/gmo_test.jpg">';
$('#productGMOFree').html(clickedItemGMO);
$('#productGMOFree').show();
} else {
$('#productGMOFree').hide();
}
//show random recipe for each item
var url = '';
$.getJSON(url, function(json) {
var randomRecipe = json[Math.floor(Math.random() * json.length)];
randomRecipe += '<div>' + '' + '<img class="img-responsive img-hover similarProductImagesCategory" src="' + randomRecipe.recipeImageCategoryURL + '">' + '' + '' + '<h3 class="similarProductSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>';
$('#featuredRecipe').append(randomRecipe);
});
//show similar products
var categoryItems = [];
$.each(json, function(i, item){
if(window.location.hash.indexOf('Tomatoes') >= 0) {
if(item.itemCommodity == '1120' && item.itemBrandLetter == "C") categoryItems.push(item);
}
if(window.location.hash.indexOf('Olive') >= 0) {
if(item.itemCommodity == '2120' && item.itemBrandLetter == "C") categoryItems.push(item);
}
});
var similarProduct= '';
$.each(json, function(i,item){
similarProduct = categoryItems[Math.floor(Math.random()*categoryItems.length)];
similarProduct += '<div>' + '' + '<h3 class="similarProductSubCategoryImgCaption">' + similarProduct.itemName + '</h3>' + '' + '</div>';
});
$('#productSimilar').append(similarProduct);
});
closeNav();
}
}
});
});
<section>
<div id="productsSideBar" class="sidenav">
×
<h3>View All</h3>
Tomatoes
Sauce
Olive Oil
Red Wine Vinegar
Balsamic Vinegar
Peppers
Artichokes
Olives
Beans
Capers & Pignoli Nuts
Specialties
Spices
Fish
Broth, Stocks & Soups
Breadcrumbs
Grated Cheese
</div>
</section>
<section id="productCategories">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<br>
<span class="expandSidebar" onclick="openNav()">☰ Categories</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="imagesCategoryProducts"></div>
</div>
</div>
</div>
</section>
<!-- Product Row Start -->
<section id="individualProduct">
<div class="container topmargin">
<div class="row">
<div class="col-md-7 col-sm-6">
<!-- Product Title Div -->
<div id="productTitle"></div>
<!-- Product UPC Div -->
<div class="displayInlineBlock" id="productUPC"></div>
<span class="displayInlineBlock"><h2>•</h2></span>
<!-- Product OZ Div -->
<div class="displayInlineBlock" id="productOZ"></div>
<span class="displayInlineBlock"><h2>•</h2></span>
<!-- Where to Buy Icon -->
<div class="displayInlineBlock"><h3><span rel="popover" data-content="View Product Availability"><span class="fa-stack"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-map-marker fa-stack-1x fa-inverse"></i></span></span></h3></div>
<hr>
<!-- Product Description Div -->
<div id="productDescription"></div>
<div class="row center">
<!-- Gluten Free Div -->
<div class="displayInlineBlock" id="productGlutenFree"></div>
<!-- BPA Free Div -->
<div class="displayInlineBlock" id="productBPAFree"></div>
<!-- GMO Div -->
<div class="displayInlineBlock" id="productGMOFree"></div>
</div>
</div>
<div class="col-md-5 col-sm-6">
<!-- Product Image Div -->
<div id="productImage"></div>
</div>
</div>
</div>
</section>
<!-- Product Row End -->
<section id="relatedProducts">
<div class="container topmargin">
<div class="row">
<div class="col-md-7">
<h1 class="center">Featured Recipe</h1>
<div id="featuredRecipe"></div>
</div>
<div class="col-md-5">
<h1 class="center">Similar Product</h1>
<br>
<div id="productSimilar"></div>
</div>
</div>
</div>
</section>
Ok, there are a lot of things that are wrong in the code but I am not going to into that right now. To do what you want to achieve is rather simple, you already got all the code you need, you just need to make some adjustments to make it work.
Step one. Bind the click events to the body instead of to the element.
$("body").on('click', ".showProduct", function(event){
That way, any element on the page with the class showProduct that is clicked will trigger the function, not just the elements that were bound to when the initial function ran.
The rest is really simple, you already have the similar product's information available, you just didn't put it in the data attributes when you created the element. Now obviously there are better ways of doing this... but here is how you would do it:
similarProduct = '<div>' +
'<a href="#" class="showProduct"' +
'data-itempageurl="' + similarProduct.itemFullUPC + '"' +
'data-itemgmo="' + similarProduct.itemGMOFree + '"' +
'data-itembpa="' + similarProduct.itemBPAFree + '"' +
'data-itemgluten="' + similarProduct.itemGlutenFree + '"' +
'data-itemlowsodium="' + similarProduct.itemLowSodium + '"' +
'data-itemorganic="' + similarProduct.itemOrganic + '"' +
'data-itemimage="' + similarProduct.imageURL + '"' +
'data-itemname="' + similarProduct.itemName + '"' +
'data-itemoz="' + similarProduct.itemPackSize + '"' +
'data-itemdescription="' + similarProduct.itemDescription + '"' +
'data-itemupc="' + similarProduct.itemFullUPC + '"' + '>' +
'<img class="img-responsive img-hover similarProductImagesCategory" src="' + similarProduct.imageURL + '">' +
'<h3 class="similarProductSubCategoryImgCaption">' + similarProduct.itemName +
'</h3>' + '</a>' + '</div>';
});
That should do it... now you will notice when you click on one of the similar products it should show you the information like you wanted, however it will add the new similar product to the already existing similar product list and this will keep on growing the more you click. I am sure you can figure out how to clear the list. If not just shout.
Here is the codepen: http://codepen.io/anon/pen/oYJpve
EDIT: As a side note... normally you want to store the json data with the product id as key. Then you only save the key inside the data attribute. On click you simply use the product id (key) to access the information in your stored object.
It is really easy to do. Just create a global variable
var product_data = {};
Then you populate the object when you get the data with a function. So on success of your ajax call you could have something like this:
product_data = json;
or even better you could have a function that changes the data into the structure you want:
product_data = restructureDataFunction(json);
Then you have a nice data set which you can pull from. If you need to make updates to the dataset you can do it in one place instead of in each element.
If you want, have a look at Angular 2, it should teach you a lot and also help you with future projects. It is really strong tool especially if you have html elements representing data.
I am using the code below which i found on: http://www.rahulsingla.com/blog/2011/08/itunes-performing-itunes-store-search-in-javascript to pull songs from Itunes based on a keyword, however i only want to pull songs on page-load without having to use the search box, lets say my keyword is "search-keyword", i would like to display songs immidiately on page-load or refresh without using the search box, here is the code below:
<html>
<head>
<title>iTunes - Music Search in javascript</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
.songs-search-result {
border: 1px solid Gray;
margin-bottom: 5px;
padding: 5px;
}
.songs-search-result .label{
display: inline-block;
width: 200px;
}
</style>
<script type="text/javascript">
function urlEncode(obj) {
var s = '';
for (var key in obj) {
s += encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]) + '&';
}
if (s.length > 0) {
s = s.substr(0, s.length - 1);
}
return (s);
}
function performSearch() {
var params = {
term: encodeURIComponent(jQuery('#search-keyword').val()),
country: 'US',
media: 'music',
entity: 'musicTrack',
//attribute: 'artistTerm,albumTerm,songTerm,musicTrackTerm',
limit: 20,
callback: 'handleTunesSearchResults'
};
var params = urlEncode(params);
var url = 'http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch?' + params;
var html = '<script src="' + url + '"><\/script>';
jQuery('head').append(html);
}
function handleTunesSearchResults(arg) {
var results = arg.results;
var html = '';
for (var i = 0; i < results.length; i++) {
var item = results[i];
var obj = {
source: 0,
track_id: item.trackId,
track_name: item.trackCensoredName,
track_url: item.trackViewUrl,
artist_name: item.artistName,
artist_url: item.artistViewUrl,
collection_name: item.collectionCensoredName,
collection_url: item.collectionViewUrl,
genre: item.primaryGenreName
};
results[i] = obj;
html += '<div class="songs-search-result">';
html += '<span class="label">Track:</span>{0} '.replace("{0}", obj.track_name);
html += 'Preview '.replace("{0}", item.previewUrl);
html += 'Full Song '.replace("{0}", obj.track_url);
html += '<span class="label">Track Price:</span>{0} {1}<br />'.replace("{0}", item.trackPrice).replace("{1}", item.currency);
html += '<span class="label">Artist:</span>{1}<br />'.replace("{0}", obj.artist_url).replace("{1}", obj.artist_name);
html += '<span class="label">Collection:</span>{1}<br />'.replace("{0}", obj.collection_url).replace("{1}", obj.collection_name);
html += '<span class="label">Collection Price:</span>{0} {1}<br />'.replace("{0}", item.collectionPrice).replace("{1}", item.currency);
html += '<span class="label">Primary Genre:</span>{0}<br />'.replace("{0}", obj.genre);
html += '</div>';
}
jQuery('#itunes-results').html(html);
}
</script>
</head>
<body>
Please enter a search term below (e.g. Michael):<br />
<input type="text" id="search-keyword" title="Enter Search Keyword" />
<br />
<input type="button" value="Perform iTunes Search" onclick="performSearch();" />
<div id="itunes-results">
</div>
</body>
</html>
I am making a video website and so far I haven't styled it much yet so it's just videos on a blank page.
I have made it so that videos don't buffer until you click the thumbnail on the page. I added code to pause the video when you click it while it's playing and also play it again when it's clicked again.
I set it so the controls show on the HTML video but there's one problem. When you click on the video itself to pause it works fine, but when you click anything on the controls bar at the bottom it also pauses. And on top of that when you click the play/pause button on the actually control bar, the button pauses the video but it then instantly starts playing again because my function for playing when video is clicked fires.
How can I make it so the on click events don't work on the controls bar?
Another issue also is that when in fullscreen, the click on video to pause feature doesn't work at all. How do I fix that? I know that's quite a few questions in one post. Sorry :D
I looked everywhere and couldn't find answers. Heres my HTML and my JavaScript. The website is here: https://googledrive.com/host/0BxOngeQ9zGOeeHdlS3YyUFluVkk/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project Bluebar</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascript/vidloader.js"></script>
</head>
<body>
<noscript><h1>JavaScript is disabled! The page will not function properly.</h1><br><br></noscript>
<div id="1"><br><br><img class="video" onclick="vidcl('media/1.mp4', 'media/1.png', '1', '480', '480', 'i1', 'media/1mo.png');" id="i1" onmouseover="thumbch('i1', 'media/1mo.png');" onmouseout="thumbak('i1', 'media/1.png');" src="media/1.png" width="480" height="480"></div>
<div id="2"><br><br><img class="video" onclick="vidcl('media/2.mp4', 'media/2.png', '2', '640', '480', 'i2', 'media/2mo.png');" id="i2" onmouseover="thumbch('i2', 'media/2mo.png');" onmouseout="thumbak('i2', 'media/2.png');" src="media/2.png" width="640" height="480"></div>
<div id="3"><br><br><img class="video" onclick="vidcl('media/3.mp4', 'media/3.png', '3', '360', '360', 'i3', 'media/3mo.png');" id="i3" onmouseover="thumbch('i3', 'media/3mo.png');" onmouseout="thumbak('i3', 'media/3.png');" src="media/3.png" width="360" height="360"></div>
<div id="4"><br><br><img class="video" onclick="vidcl('media/4.mp4', 'media/4.png', '4', '400', '300', 'i4', 'media/4mo.png');" id="i4" onmouseover="thumbch('i4', 'media/4mo.png');" onmouseout="thumbak('i4', 'media/4.png');" src="media/4.png" width="400" height="300"></div>
</body>
</html>
and the JavaScript
var cs;
var no;
for(var x = 1; x < 5; x++){
no = x.toString();
cs = 'img' + no + ' = new Image(); img' + no + ".src = 'media/" + no + "mo.png';";
eval(cs);
}
var video;
var imgm;
var vidm;
var idm = '';
var widm;
var heim;
var imidm;
var hovimm;
function cla(){
video = document.getElementById('av');
if(video.paused){
video.play();
}else{
video.pause();
}
};
function vidcl(vid, img, id, wid, hei, imid, hovim){
if(idm !== ''){
document.getElementById(idm).innerHTML = '<br><br><img class="video" onclick="' + "vidcl('" + vidm + "', '" + imgm + "', '" + idm + "', '" + widm + "', '" +heim + "', '" + imidm + "', '" + hovimm + "');" + '" id="' + imidm + '" onmouseover="thumbch(' + "'" + imidm + "', '" + hovimm + "');" + '" onmouseout="thumbak(' + "'" + imidm + "', '" + imgm + "');" + '" src="' + imgm + '" width="' + widm + '" height="' + heim + '">';
}
vidm = vid;
imgm = img;
idm = id;
widm = wid;
heim = hei;
imidm = imid;
hovimm = hovim;
window.location.hash = id;
document.getElementById(id).innerHTML = '<br><br><video id="av" class="video" ondblclick="fs();" onclick="cla();" src="' + vid + '" width="' + wid + '" height="' + hei + '" autoplay loop controls>';
};
window.onkeydown = function(event){
video = document.getElementById('av');
if(event.keyCode === 32){
event.preventDefault();
if(video.paused){
video.play();
}else{
video.pause();
}
}
};
function thumbch(id, ims){
document.getElementById(id).src = ims;
};
function thumbak(id, ims){
document.getElementById(id).src = ims;
};
function fs(){
video = document.getElementById('av');
if(video.requestFullScreen){
video.requestFullScreen();
}else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
};
I figured it out myself. I disabled the default video controls and the context menu so that they the controls can't be re-enabled through it and I made my own controls.
I want to append data I fetched from server to a div tag, but I can't get it to work. That's HTML with a div tag to which I'd like to append data from the JS code.
HTML:
<body onload="initialize()">
<div id="text"></div>
</body>
And here is JavaScript code. I would like to replace document.write with a function that will append data to a div tag.
JS:
function initialize() {
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
for (var i = 0; i < data.length; i++) {
document.write('<img src="' + data[i].image + '" />' + data[i].title + data[i].description + '<br>');
}
});
}
Fiddle: http://jsfiddle.net/GDxtf/
I just started learning JavaScript. Help will be greatly appreciated :)
Paste this code in the bottom of your HTML document, right before </body>:
<script>
// If you're not using an HTML5 doctype, use <script type="text/javascript> instead of just <script>
$(function () {
$targetDiv = $("#text");
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
for (var i = 0; i < data.length; i++) {
var $div = $("<div />");
var $img = $("<img />");
$img.attr("src", data[i].image);
$img.appendTo($div);
var $title = $("<h2>" + data[i].title + "</h2>");
$title.appendTo($div);
var $description = $("<p>" + data[i].description + "</p>");
$description.appendTo($div);
$div.appendTo($targetDiv);
}
});
});
</script>
Did this solve your problem?