I try to insert a youtube video through the Youtube iframe API, but now doesn't work appear "An error occurred Please try again later".
here is my code:
<html>
<head>
<title>test</title>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<div id="youtube"></div>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube', {
videoid: 'UqyT8IEBkvY',
height: '360',
width: '640',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady() {
console.log("test");
player.playVideo();
player.mute();
}
</script>
</body>
</html>
Try this straightforward approach I got from HTML YouTube Videos:
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/t2ByLmLnYJ8">
</iframe>
<script src="https://apis.google.com/js/client.js"> </script>
</body>
</html>
Give that a run and you'll have a Youtube inside an iframe in no time. How you expand the program is up to you.
This Works for me,
<div id="ytplayer"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '360',
width: '640',
videoId: 'UqyT8IEBkvY',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady() {
console.log("test");
player.playVideo();
player.mute();
}
</script>
Or You can use this,
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//www.youtube.com/iframe_api"></script>
<script>
var app = angular.module('app', ['youtube-embed']);
app.controller('ctrl', function ($scope) {
$scope.player = null;
$scope.$on('youtube.player.playing', function () {
console.log('playing!!!')
})
});
</script>
<script src="//brandly.github.io/angular-youtube-embed/angular-youtube-embed.js"></script>
</head>
<body ng-controller="ctrl">
<youtube-video video-id="'UqyT8IEBkvY'" player="player"></youtube-video>
</body>
</html>
good luck
Take the option of "share" -> "embeded" and copy the code
<div align="center">
<div style="display:inline" align="left">
<iframe style="display:inline" width="560" height="315" src="https://www.youtube.com/embed/ISNZYcpoyoM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div style="display:inline" align="center">
<iframe style="display:inline" width="560" height="315" width="560" height="315" src="https://www.youtube.com/embed/10_MkXNMpVw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
</div>
<div style="display:inline" align="right">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2Z0nt-pwIlA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
Related
I would like to be able to set the video ID to be played from user input via an <input type="text"> field.
My naive attempt looks like so
<!DOCTYPE html>
<html>
<body>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
<script>
function loadVideo() {
var ytplayer = document.getElementByID("ytplayer");
var videoid = document.getElementByID("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
</body>
</html>
but the player widget remains blank after entering an ID and clicking "Load".
What is wrong?
Define a function before using it. Simply move the <script> above the <button>
You have a typo twice getElementById has a lower case "d".
In the end it will look like this:
<!DOCTYPE html>
<html>
<body>
<script>
function loadVideo() {
var ytplayer = document.getElementById("ytplayer");
var videoid = document.getElementById("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
</body>
</html>
I can't help you any further than that however, because your example doesn't work after these two things are fixed, as it doesn't contain all the code needed to make it work.
I create a App which Phonegap on IOS, where I need to play sounds for specified actions.
To play the sound from a url works fine, but not from a local source. I tried different things.
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sisMedia.css"/>
<link rel="stylesheet" href="css/sisMedia_custom.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jqm_custom.js"></script>
<script src="js/jquery-validation/jquery.validate.min.js"></script>
<title>Einlasskontrolle</title>
</head>
<body>
<div data-role="header" id="header" data-position="fixed" data-theme="a">
<h1>Audiotest</h1>
</div><!-- /header -->
<div data-role="page" data-title="Einlasskontrolle">
<div role="main" class="ui-content">
<button onclick="playAudio('audio/ok.mp3')">Play</button>
<button onclick="playAudio('audio/ok.mp3',true)">Play</button>
<button onclick="playAudio('https://test.sistecs.de/sismedia/files/admin/downloads/ok.mp3')">Play</button>
<script>
function playAudio(src, absolute) {
if (absolute == true) {
src = getPhoneGapPath() + src;
}
if (device.platform == 'Android') {
src = 'file://' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() {
// ignore
}
function error_error(e) {
alert('error ' + e.message);
}
function getPhoneGapPath() {
var path = window.location.pathname;
var sizefilename = path.length - (path.lastIndexOf("/") + 1);
path = path.substr(path, path.length - sizefilename);
return path;
}
</script>
</div>
</div>
<div data-role="footer" id="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Scan</li>
<li>Setup</li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Can you help me?
I made an android app with a multi-page template. When I push the Zoeken button on the home page I go to Page 1 (id = Zoeken). On that page, when I push the button (id = zoek), the app goes to the following url android_asset/www/Zoeken/# instead of going to android_asset/www/index.html#win2 (Page 2)
When I change the id of Page 1, the foldername changes too
Why is the id Zoeken turned into a folder name?
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" src="SQLitePlugin.js"></script>
</head>
<body>
<!-- home -->
<div data-role="page" data-theme="e" id="home">
<div data-role="content">
<img src="img/logo_wablief.png" width="300" height="99" alt="wablief logo">
<ul data-role="listview" data-inset="true">
<li>Zoeken</li>
<li>A tot Z</li>
<li>Info</li>
</ul>
</div>
</div>
<!-- Page 1 -->
<div data-role="page" data-theme="e" id="Zoeken">
<div data-role="header" data-position="inline">
<h1>Zoeken </h1>
</div>
<div data-role="content"> <p>Welk woord wil je zoeken?</p>
<label for="search-basic">Vlaams woord</label>
<input type="search" name="search" id="search-basic" value="" />
Zoek
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="win2" data-add-back-btn="true" data-theme="e">
<div data-role="header">
<h1>Zoekresultaten</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<script>
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.sqlitePlugin.openDatabase ("wablief", "", "wablief", 65535);
$("#zoek").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var search = $("#search-basic").val ();
var sql = "SELECT * from wablief WHERE woord LIKE ?";
transaction.executeSql (sql, ["%"+search+"%"],
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var woord = row.woord;
var woord2 = row.woord2;
var vertaling = row.vertaling;
html += "<li>" + woord + " " + woord2 + "<br><br>" + vertaling + "</li>";
}
}
else
{
html += "<li> Geen resultaten </li>";
}
html += "</ul>";
$("#win2").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win2 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win2"));
}, error);
});
});
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
}
</script>
I solved the issue bij adding different jQuery and jQuery mobile files.
I am now using the files you can find here:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I copied and pasted them, for use offline and now it is working like a charm.
I have following html page:
<html>
<head>
<script type="text/javascript">
var myDiv = null;
window.onload = function() {
myDiv = document.getElementById("myDiv");
};
function buttonClick() {
myDiv.style.width = "200px";
myDiv.style.height = "100px";
}
</script>
</head>
<body>
<div id="myDiv" style="left:10px; top:10px; width:1000px; height:250px; overflow:auto;">
<iframe scrolling="no" id="myIframe" style="width:100%;height:100%" src="a.svg"></iframe>
</div>
<input type="button" id="button1" onclick="buttonClick()" value="resize div"/>
</body>
</html>
and a SVG "a.svg" that is the content of the iframe above:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
<circle cx="500" cy="250" r="240"/>
<script type="text/ecmascript"><![CDATA[
window.onresize = function() {
console.log("resize");
};
]]></script>
</svg>
When i now open the html page on iOS Safari and i click the button to resize the iframe to 200x100 pixels, i do not get the resize event.
But if I do the same on a PC browser like Firefox, I get the resize event.
I know that iframes are handled differently in iOS Safari, but how can I make this working ?
When run, if I click the link at the bottom of the index page to get to the map page, I see the map briefly, filling a quarter of the screen, before it vanishes. What am I doing wrong?
Here is the code for the index page, which creates the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function initialize(){
if(!window.navigator.onLine){
alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app.");
var element = document.getElementById("mainPage");
element.parentNode.removeChild(element);
document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>";
}
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
initializeMap(42,-73);
});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</head>
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the following search methods.</p>
</div>
<div data-role="content" style="height: 100%;">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
Testing
</div>
</div>
</body>
</html>
And here is the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<body>
<div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>
The following code works: jsfiddle
I took your code, simplified it (using a single page template instead of the multi page one, but just to make it easier for jsfiddle) and moved all scripts inside the head.
Also be careful with phonegap, you should handle the onDeviceReady event, and not the body onload event. Even then there's a different method there to check if you're online.