I need to autoplay an inlined video from youtube in uiwebview with IOS 5.0+.
I managed to make it play inlined with this:
NSString *html = [NSString stringWithFormat:#"\
<html>\
<head>\
<script type='text/javascript'>\
function onPlayerReady(event) {\
event.target.playVideo();\
}\
</script>\
<style type=\"text/css\">\
iframe {position:absolute; top:0%%; margin-top:-0px;}\
body {background-color:#000; margin:0;}\
</style>\
</head>\
<body>\
<iframe width=\"100%%\" src=\"https://www.youtube.com/embed/%#?feature=player_detailpage& modestbranding=1&rel=0;autoplay=1;showinfo=0;loop=1;autohide=1;playsinline=1;autoplay=1\" frameborder=\"0\" allowfullscreen></iframe>\
</body>\
</html>", ID];
[videoWebView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];
But i cant figure out how to make it auto play.
I also found other solution which auto plays the video but it starts in fullscreen, and i dont know how to make it inlined.
NSString *youTubeVideoHTML = #"<!DOCTYPE html><html><head><style>body{margin:0px 0px 0px 0px;}</style></head>
<body> <div id=\"player\"></div>
<script> var tag = document.createElement('script');
tag.src = \"http://www.youtube.com/player_api\";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {width:'%d', height: '%d', videoId:'%#', events: { 'onReady': onPlayerReady, } }); }
function onPlayerReady(event) { event.target.playVideo(); }
</script>
</body> </html>";
NSString *html = [NSString stringWithFormat:youTubeVideoHTML, 320, 150, ID];
[videoWebView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];
Is there a way to make js version inlined or first version autoplay? Or is there some other solution to this?
I finally found it.
In JS version you can specify player parameters (like "showinfo", "rel" and of course "playsinline" )
You just need to add playerVars object and specify your parameters in it.
So the code would look like this:
NSString *youTubeVideoHTML = #"<!DOCTYPE html><html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = \"http://www.youtube.com/player_api\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', {width:'%d', height: '%d', videoId:'%#', playerVars: {'playsinline' : 1, 'rel':0, 'showinfo':0}, events: { 'onReady': onPlayerReady, } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>";
NSString *html = [NSString stringWithFormat:youTubeVideoHTML, 320, 180, ID];
[videoWebView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];
Why you are not using native Video Player?
Try LBYouTubeView wrapper, it is very easy to integrate.
Related
I am using HTML 5 and I just want to create a webpage where an embedded YouTube video already starts to restart playing after it has reached a certain limit. So, here's the code:--
<!DOCTYPE html>
<html lang="en">
<head> <title>Video Playback</title> </head>
<body>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width:150, height:150,
autoplay: 1,
loop: 1,
controls: 1,
vq: 'hd144',
videoId: 'bcdxvxiztyh',
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
player.mute();
}
var done = false;
function onPlayerStateChange(event) {
setTimeout(stopVideo, 4000);
done = true;
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
</body>
I tried the above code and it just plays the video for only the first 4 seconds but it doesn't restart to play the same 4 seconds again. It seems to run only once. How do I solve this?
How do I insert a youtube web page into my HTML web page using I frame,
and please I need a code snippet that I can run to see how it looks like.
There are multiple ways to start a video on the web page.
Below can work out.
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
<div id="player"></div>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.setPlaybackRate(2);
event.target.playVideo();
}
Setup
I have a simple setup like so:
<video src="/myvideo.mp4" id="my-vid" preload></video>
<script>
var chunks = [];
var vid = document.getElementById("my-vid");
vid.onloadeddata = function() {
var mr = new MediaRecorder(vid.captureStream(), {
mimeType: "video/webm; codecs=opus,vp8"
});
mr.ondataavailable = function(e) {
chunks.push(e.data);
}
mr.start();
vid.play();
vid.muted = false;
}
// ----
// everything below here just downloads the file so I can
// run it though ffprobe
// ----
vid.onended = function() {
setTimeout(function(){
var blob = new Blob(chunks, {type: "video/webm; codecs=opus,vp8"});
var link = document.createElement("a");
document.body.appendChild(link);
link.style = "display: none;";
var url = URL.createObjectURL(blob);
link.href = url;
link.download = "content.webm";
link.click();
URL.revokeObjectURL(url);
document.body.removeChild(link);
}, 1000);
}
</script>
My video is 640 pixels by 360 pixels in size.
What I want
What I want is to scale the output video so that it blows it up to 1920 by 1080 (yes, I realize it will be blocky and ugly -- that's okay. I just need the resolution to match a second video so the two can be stitched together more easily)
What I've tried
Simply changing the <video> tag has no effect:
<video src="/myvideo.mp4" id="my-vid" preload height="1080" width="1920"></video>
This changes the display size, but not the decoded size (and therefore the MediaRecorder still returns a 640x360 video)
I can scale the video by using a <canvas> element like so:
<script>
// ...
vid.onplay = function() {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
(function loop() {
ctx.drawImage(vid, 0, 0, vid.videoWidth, vid.videoHeight, 0, 0, 1920, 1080);
setTimeout(loop, 1000 / 30); // 30 fps
})();
}
</script>
If I then use mr = new MediaRecorder(canvas) instead of mr = new MediaRecorder(vid) then I get a scaled video, but there's no audio!
I am using the YouTube API as the following:
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars: { 'modestbranding': 1, 'showinfo' : 0, 'controls': 0 },
videoId: 'M7lc1UVf-VE'
});
}
</script>
I have a div that is named player on my html.
I need the video to not have the controls (controls=0). The problem is whenever I remove the controls instead of them there is a black bar. Instead of that black bar replacing the controls, I want the video to expand and take the whole video's height&width.
Am I missing anything here? Thanks for any light on that matter.
Try to add this in your 'playerVars' :
'autoplay' : 0
It seems that the video dimensions doesn't match the values of your variables.
This looks better (e.g. height: '360'):
<html>
<head>
<title>YT - Test</title>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '360',
width: '640',
playerVars: { 'modestbranding': 1, 'showinfo' : 0, 'controls': 0 },
videoId: 'M7lc1UVf-VE'
});
}
</script>
</head>
<body>
<div id="ytplayer"></div>
</body>
</html>
Please see https://developers.google.com/youtube/youtube_player_demo
I have a canvas element on my page. I draw an image over it and some data that the user entered. On a press of a button I want to send the canvas to printer, to print it on paper. I tried to use this plug-in: jQuery.printElement, like that:
the button code:
PRINT
'print_voucher()' function:
function print_voucher()
{
$("#canvas_voucher").printElement();
}
canvas_voucher is the ID of my canvas element. It printed the page, but didn't print the canvas. I tried to use it like that as well:
$("#canvas_voucher img").printElement();
But that didn't even start the printer.
So how can I do that? How can I print the content of the canvas?
**EDIT**
Here's the code that creates my canvas and tries to create an image with it:
function create_voucher(visitor_name, visitor_identity_num, unique_number)
{
var canvas = $("#canvas_voucher")[0];
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
// Draw image
var img = new Image();
img.src = 'https://someurl.com/image.jpg';
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.fillStyle="#CCC";
ctx.font="bold 20px Arial";
ctx.fillText(visitor_name, 750, 270);
ctx.fillText(visitor_identity_num, 750, 295);
ctx.font="bold 25px Arial";
ctx.fillText(unique_number, 620, 325);
}
var voucher = canvas.toDataURL("image/png");
$("#voucher_img").attr("src", voucher);
} else {
alert('You need Safari or Firefox 1.5+ to see this.');
}
}
This will convert the canvas to a .png image URL and open it in a new browser window
The Print Dialog is triggered to let the user print the page.
function print_voucher(){
var win=window.open();
win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
win.print();
win.location.reload();
}
Here is example code:
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="gold";
ctx.strokeStyle="blue";
ctx.lineWidth=5;
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();
function print_voucher(){
var win=window.open();
win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
win.print();
win.location.reload();
}
$("#printVoucher").click(function(){ print_voucher(); });
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br>
<button id="printVoucher">Print</button>
</body>
</html>
Found the problem and fixed it.
Apparently it was a security issue at this line:
img.src = 'https://someurl.com/image.jpg';
Once it was pointing out to a server, it was considered as a potential security threat. So I changed it to:
img.src = 'images/image.jpg';
After that I created a function to make an image from the canvas and called it within the 'img.onload' part:
...
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.fillStyle="#CCC";
ctx.font="bold 20px Arial";
ctx.fillText(visitor_name, 750, 270);
ctx.fillText(visitor_identity_num, 750, 295);
ctx.font="bold 25px Arial";
ctx.fillText(unique_number, 620, 325);
draw_voucher_img();
...
function draw_voucher_img()
{
var canvas = $("#canvas_voucher")[0];
var voucher = canvas.toDataURL();
$("#voucher_img").attr("src", voucher);
}
Now it worked!