I have trying to load youtube videos using stagewebview on AIR Desktop. (windows 10)
Code below:
var SWV:StageWebView = new StageWebView(true);
SWV.addEventListener(ErrorEvent.ERROR, swvErrorHandler);
var swvHeight:Number = stage.stageHeight - (75);
var swvWidth:Number = stage.stageWidth;
var swvYCoord:Number = 75;
SWV.stage = stage;
SWV.viewPort = new Rectangle(0, swvYCoord, swvWidth, swvHeight);
var vId:String = 'QowwaefoCec';
var urlToLoad:String = "http://www.youtube.com/embed/"+vId+"?rel=0&controls=1&showinfo=0&autoplay=0";
SWV.loadURL(urlToLoad);
Running the code gives a window with black background. Right clicking on it pops up the adobe flashplayer menu stating "Movie not loaded". Flash version is 25.0.0.148
If i use
urlToLoad="https://www.youtube.com/watch?v="+vId;
i get a malformed youtube page with majority of elements missing.
Tried with number of videos. result is always the same.
Can any one help please? I remember having tried out the above code a year or so back (when i was testing something else). It had definitely worked then. Cant fathom why it doesnot work now. Any help will be highly appreciated.
Please try the following:
var urlToLoad:String = "<!DOCTYPE HTML><html><body><iframe style=\"border: 0; width: 100%; height: 100%; padding:0px; margin:0px\" id=\"player\" type=\"text/html\" src=\"http://www.youtube.com/embed/" + vId + "?fs=0\" frameborder=\"0\"></iframe></body></html>";
SWV.loadString(urlToLoad, "text/html" );
Same problem. if you only want to play, try this:
browser.loadURL("https://www.youtube.com/v/hFupHx5G44s");
Related
How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.
According to this site, this is supported in the playbackRate and defaultPlaybackRate attributes, accessible via the DOM. Example:
/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();
/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;
The above works on Chrome 43+, Firefox 20+, IE 9+, Edge 12+.
Just type
document.querySelector('video').playbackRate = 1.25;
in JS console of your modern browser.
(Tested in Chrome while playing videos on YouTube, but should work anywhere--especially useful for speeding up online training videos).
For anyone wanting to add these as "bookmarklets" (bookmarks containing JavaScript code instead of URLs) to your browser, use these browser bookmark names and URLs, and add each of the following bookmarks to the top of your browser. When copying the "URL" portion of each bookmark below, copy the entire multi-line code block, new-lines and all, into the "URL" field of your bookmark creation tool in your browser.
Name: 0.5x
URL:
javascript:
document.querySelector('video').playbackRate = 0.5;
Name: 1.0x
URL:
javascript:
document.querySelector('video').playbackRate = 1.0;
Name: 1.5x
URL:
javascript:
document.querySelector('video').playbackRate = 1.5;
Name: 2.0x
URL:
javascript:
document.querySelector('video').playbackRate = 2.0;
Here are all of my playback-speed bookmarklets:
I added all of the above playback speed bookmarklets, and more, into a folder named 1.00x on my bookmark bar, as shown here:
References:
The main answer by Jeremy Visser
Copied from my GitHub gist here: https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
Get other bookmarklets here too, such as for aiding you on GitHub.
I prefer having a more fine tuned approach for video speed. I like being able to speed up and slow down the video on command. Thus I use this:
window.addEventListener("keypress", function(e) {
if(e.key==="d") document.getElementsByTagName("video")[0].playbackRate += .1; else if(e.key==="s") document.getElementsByTagName("video")[0].playbackRate -= .1;
}, false);
Press d to speed up, s to slow down.
You can use this code:
var vid = document.getElementById("video1");
function slowPlaySpeed() {
vid.playbackRate = 0.5;
}
function normalPlaySpeed() {
vid.playbackRate = 1;
}
function fastPlaySpeed() {
vid.playbackRate = 2;
}
In chrome, create a new bookmark
Enter an arbitarary name for example speed selector then Enter the following code in the URL
javascript:
var speed = prompt("Please enter speed", "1");
document.querySelector('video').playbackRate = speed,void(0);
then when you click on this bookmark, a popup window appears then you can enter the speed of video
solutions
dom event onloadstart="this.playbackRate = 1.5;"
<video
onloadstart="this.playbackRate = 1.5;"
controls
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
js video.volume = 0.5;
<video
id="custom-video"
controls
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
const video = document.querySelector('#custom-video');
if(video) {
video.playbackRate = 1.5;
}
demo
https://codepen.io/xgqfrms/pen/bGLOrjM
javascript:document.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 0.1;
you can put any number here just don't go to far so you don't overun your computer.
suppose that your video/audio id is myVideo, then you can simply use JavaScript for doing that you wanna do, By just typing the following simple JS code:-
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;`
That will decrease the speed of your video/audio to it's half speed.
playbackspeed
Indicates the current playback speed of the audio/video.
Example values:
1.0 is normal speed
0.5 is half speed (slower)
2.0 is double speed (faster)
-1.0 is backwards, normal speed
-0.5 is backwards, half speed
source: w3schools.com
Firefox has a speed control context menu when you right-click
.
It works always you can try this
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;
If there are multiple videos on the page, most of other answers will only change the first one.
javascript:document.querySelectorAll('video').forEach( (vid) => vid.playbackRate = 1.5 );
^^ this bookmarklet will speed up all videos on the open page.
Just type the following command in the javascript console of your browser:
document.querySelector('video').playbackRate = 2.0;
You can get it by choosing the inspect option from the right-click menu as follows:
My embded youtube video won't play on mobile devices (desktop working fine). the videos is trigger when an image which hover it got clicked.i would like to keep it that way just to make it work on mobile.
(i know that it has something to do with the fact that i must emded it)
can you please advice
Thanks a lot!!
this is the code:
a class="thumb-video show-product-video" href="https://www.youtube.com/watch?v=fmpEyJJHBC8">
in the html, add the unique code of youtube in the last section of url
ex: http://www.youtube.com/v/fmpEyJJHBC8
try this
public string GetVideo(object MedVideo)
{
//DataRowView dRView = (DataRowView)imgSRC;
string v = MedVideo.ToString();
v = v.Substring(v.LastIndexOf("v=") + 2);
if (v.Contains("&"))
v = v.Substring(0, v.LastIndexOf("&"));
VideoURL = "http://www.youtube.com/v/" + v;
return VideoURL;
}
I'm trying to make some tasty live tile action for my windows phone 8 app. I've chosen to use the Cycle Tile template for some awesome gliding images but there is a problem: Microsoft seem to have kindly added a grey translucent filter to all the images so that the title text at the bottom is legible even in the case of a white image. This is annoying if the developer intends to make a metro style collage by using WritableBitmap. Whites come out as an off-white grey and the theme colour is a shade darker than all the other tiles:
The code (in a usercontrol in the visual tree):
const double TILE_H = 336;
const double TILE_W = 691;
Size TILE_SIZE = new Size(TILE_W, TILE_H);
const string FILEDIREC = "/Shared/ShellContent";
LayoutRoot.Height = TILE_H;
LayoutRoot.Width = TILE_W;
LayoutRoot.Clip = new RectangleGeometry() { Rect = new Rect(new Point(), TILE_SIZE) };
LayoutRoot.Background = new SolidColorBrush(
((Color)Application.Current.Resources["PhoneAccentColor"]));
TextBlock tb = new TextBlock();
Canvas.SetLeft(tb, 200.0);
tb.Text = "Why is this text grey? + lots more text";
tb.FontSize = 50;
tb.Width = 300;
tb.Foreground = new SolidColorBrush(Colors.White);
tb.TextWrapping = TextWrapping.Wrap;
LayoutRoot.Children.Add(tb);
var bmp = new WriteableBitmap((int)TILE_W, (int)TILE_H);
bmp.Render(LayoutRoot, null);
bmp.Invalidate();
var isf = IsolatedStorageFile.GetUserStoreForApplication();
var filename = FILEDIREC + "/tile.jpg";
if (!isf.DirectoryExists(FILEDIREC))
{
isf.CreateDirectory(FILEDIREC);
}
using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))
{
bmp.SaveJpeg(stream, (int)TILE_W, (int)TILE_H, 0, 100);
}
imageURIs.Add(new Uri("isostore:" + filename, UriKind.Absolute));
//similar process for other images used by CycleTileData
//these images then added to CycleTileData in the usual way
Any help, explanation, advise or workarounds to get degreying will be greatly appreciated. Thanks. I've tried using the images in different tile types, eg. the front of the flip tile has no issues.
I don't see any obvious issues with the code, but something I would try is to use the Isolated Storage Explorer and download the file and see what it looks like.
When generating custom tiles you may want to consider generating a PNG instead of a JPG. One of the benefits is that you then can generate a transparent image (which means your tile will always have the right theme background color) and PNG also uses a non-lossy compression scheme so there are no compression artifacts introduced.
Take a look at this answer where I describe how I generate tiles in one of my apps. Hopefully that will be of some use to you.
I've created a page with an empty iframe on it. I can then select the iframe document and navigate to it's body:
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentDocument || iframe.contentWindow.document;
var body = doc.body;
console.log("Body is", body);
In firefox and chrome this gives me the body object. In IE10 it gives me null.
Here is a Jsbin demonstrating the issue. Open up the JS, Console, Output panels and click "Run With JS".
Two questions:
How do I get access to the iframe's body in a cross-browser manner?
Which is the correct "to-spec" behavior?
I had a similar problem earlier today. It seems IE, at least 9 and 10, doesn't create the iframe body correctly (when I used the developer tools I was able to see a body tag inside the iframe, but like you wasn't able to call it), when there's no specified src. It gives you null cause it doesn't exist.
The answer, to whether there is a cross browser manner to access the iframe's body, is no. BUT, you could use a workaround. First, check if the iframe body exist, if not, then create it.
Your code would look like this:
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentDocument || iframe.contentWindow.document;
// The workaround
if (doc.body == null) { // null in IE
doc.write("<body></body>");
}
var body = doc.body;
console.log("Body is", body);
Source: http://forums.asp.net/t/1686774.aspx/1
This code is working for me cross-browser:
var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
var body=doc.getElementByTagName("body")[0];
Over a year later but I believe the solution was to call
doc.open()
//make any modifications
doc.close()
//at this point doc.body will not be null
This made things work in a fairly consistent manner cross browser
im a little stuck using the canvas element in html5, have scoured the net looking for a workable solution but to no avail!
the main issue is that I want to click a button and send just the canvas element on the page to the printer.
i have tried using toDataUrl() - but this just seems to be resulting in a blank white image which has none of the canvas content!
the other issue i am experiencing is that attempting to initiate any javascript functions using "onClick" attached to a form button seems to be being tempermental at best!
here is my current attempt - this works in the sense that it does open a new window and attempt to send it to printer and it does create a base64 string (tested this using the "dataUrl" output on the second lowest document.write line) but as previously mentioned the image appears to be completely blank! (the canvas itself is definitely filled, both with an imported image and some text)
function printCanv()
{
var dataUrl = document.getElementById('copy').toDataURL(); //attempt to save base64 string to server using this var
document.getElementById('testBox').value = dataUrl; //load data into textarea
//attempt open window and add canvas etc
win = window.open();
self.focus();
win.document.open();
win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
((image code is here but site will not let me post it for some reason?))
win.document.write(dataUrl);
win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
win.document.close();
win.print();
win.close();
}
note: the code from "win = window.open()" onwards is currently taken from a tutorial and not my own work!
it is currently being called using <body onload="printCanv";"> - for some reason I could not get this to work at all using a button (little chunk of code below is my attempt which seemed to fail)
<input type="button" id="test" value="click me" onClick="printCanv();"> </input>
apologies is this help request is all over the place! i haven't posted to a site like this before and it didn't like me posting some html/script!
thanks in advance for any help you may be able to offer :)
Edit: draw function:
function copydraw() { //function called "copydraw" (could be anything)
var testimage3 = document.getElementById('copy').getContext('2d'); //declare variable for canvas overall (inc paths)
var img3 = new Image(); //declare image variable called "img3"
var testVar = document.getElementById('userIn').value; //take value from userin box. only updating on browser refresh?
img3.onload = function(){ //when image has loaded (img.onload) run this function
testimage3.drawImage(img3,0,0); //draw "img" to testimage
testimage3.font = "30pt 'Arial'"; //font method varies font attrib (weight, size, face)
testimage3.fillStyle = "#000000"; //sets fill color
testimage3.fillText(testVar, 310, 360); //filltext method draws text (xup ydown)
}
img3.src = 'images/liecakeA4.jpg'; //source of image
}
This function works perfectly, it draws the object and adds text from the variable, but for some reason it seems to be preventing me from outputting it as an image. I'm really confused!
I'm not sure exactly what's wrong with your code, I suspect in your current version calling printCanv in the body load event will mean you're trying to print the canvas before it's drawn. Running it off the button should work better, I'm not sure why that wasn't working for you as there's no reason in principle why it shouldn't work.
To arrive at a working version I've modified your code slightly:
function printCanvas(el) {
var dataUrl = document.getElementById(el).toDataURL(); //attempt to save base64 string to server using this var
var windowContent = '<!DOCTYPE html>';
windowContent += '<html>'
windowContent += '<head><title>Print canvas</title></head>';
windowContent += '<body>'
windowContent += '<img src="' + dataUrl + '">';
windowContent += '</body>';
windowContent += '</html>';
var printWin = window.open('','','width=340,height=260');
printWin.document.open();
printWin.document.write(windowContent);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
This works for me in the Firefox 4.0 nightly.
One addition to the accepted-best-answer: It doesnt work here with Chrome 17.0.942.0 winvista, because the print-preview-dlg is shown within the website itself and printWin.close() will close the dlg too.
So printWin.close() must be delayed or initiated by the user, but those are no good solutions.
It would be best, if chrome printdlg could have a callback, sth. one knows, printing is done, and can close the window. If this is possible is another question.