I am trying to implement Ooyala's player in my code and I was told that if I wanted to use buttons to switch the content of the video player then I should use the setEmbedCode function but the examples they have on their site aren't very clear.
What I want to have happen is to simply have a link that when clicked will change the video to a different URL/embed code. I've tried using the 'setQueryStringParameters'
document.getElementById('video-player'+pageNum).setQueryStringParameters({embedCode:videoURL})
All I get with that is a:
'is not a function message.'
var url = 'http://player.ooyala.com/player.js?embedCode='+videoURL+'&targetReplaceId=video-player'+pageNum+'';
var tempScript = document.createElement('script');
tempScript.type = 'text/javascript';
tempScript.src = url;
When I call this it creates the video player just fine, but I'm not sure how to change the embed code once it's created.
Check this sample code from ooyala site. "SwitchMovie" will play different video with different embedcode.
http://demo.ooyala.com/product-demos/playerScripting-demo.html
document.getElementById('player').setQueryStringParameters({embedCode:'8wNTqa-6MkpEB1c7fNGOpoSJytLptmm9',hide:'share,fullscreen'})
UPDATE:
The following code is working perfect for me. Try it, as I mentioned in my comments below you need to have a callback function if you need to interface with the player.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swap Video</title>
</head>
<body>
<script src="http://player.ooyala.com/player.js?callback=receiveOoyalaEvent&playerId=player&width=480&height=360&embedCode=llMDQ6rMWxVWbvdxs2yduVEtSrNCJUk1&version=2"></script>
<script>
function receiveOoyalaEvent(playerId, eventName, eventArgs) {
}
</script>
<br><br>
<button onclick="document.getElementById('player').setQueryStringParameters({embedCode:'8wNTqa-6MkpEB1c7fNGOpoSJytLptmm9',hide:'share,fullscreen'})">Switch Movie</button>
</body>
</html>
Related
I'm trying to scrape the following html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>click.com.cn</title>
<script >
window.location.href='weixin://dl/business/?t=111111'
</script>
</head>
<body>
</body>
</html>
since weixin is a custom protocol the browser cannot navigate to this website.
However it also makes the puppeteer page to get stuck on screenshot request .
I have tried to intercept this weixin:// request but have noticed that the request interceptor intercepts only http/s requests
my code :
await page.setRequestInterception(true);
page.on("request", async (request: Request) => {
const url = request.url();
// request.abort etc...
}
Is there an option in puppeteer or in Chrome DevTools Protocol to intercept all kind of protocols .
Also tried to override the window.location.href property but it failed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript">
var myRequest = new XMLHttpRequest();
function loadXMLDoc(url)
{
myRequest.onreadystatechange = onResponse;
myRequest.open("GET", url, true);
myRequest.send();
}
function onResponse()
{
if(myRequest.readyState == 4 && myRequest.status == 200)
document.getElementById("A").innerHTML = myRequest.responseXML.documentElement.getElementsByTagName("color")[1].childNodes[0].nodeValue;
}
</script>
</head>
<body>
<p>Response: <span id="A"></span></p>
<button onclick="loadXMLDoc('example.xml')">Get Color</button>
</body>
</html>
a.meaning of the value true in myRequest.open("GET", url, true).
b. What values exists for the myRequest.readyState field, and what do they mean?
c. After the Get Color button is clicked, which portion of the example.htm code is updated?
d. If the XML file being accessed to get the color data has the following code:
<color_list>
<color>Red</color>
<color>Green</color>
<color>Blue</color>
</color_list>
sketch the Web browser page display of the example.htm page after the Get Color button is pressed and the page is updated.
I have this HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Clear a Timer</title>
<meta charset="utf-8" />
<script>
var theTimer, xPosition = 0, theImage;
function doTimer() {
theImage = document.getElementById("courseraLogo");
xPosition = xPosition + 1;
theImage.style.left = xPosition;
}
</script>
</head>
<body onload="theTimer = setInterval(doTimer, 50)">
<img src="../img/coursera.png" id="courseraLogo"
style="position:absolute; left:0">
<button onclick="clearTimeout(theTimer);">
Stop!
</button>
</body>
</html>
The code is supposed to move an image from left to right at an interval of 50ms. It does not work if a specify the DOCTYPE tag: the image does not move. Why this is happening? Is there any compatibility issue related to the HTML version? Or do I need to use a similar method to setInterval compatible with HTML5?
You need to include the units when setting style.left:
theImage.style.left = xPosition + "px";
This isn't strictly speaking an HTML5 thing. Omitting the units works only if you include no doctype at all: including an HTML4 doctype such as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> will also cause your script to fail unless you include the units.
(I tested this in current versions of Safari, Chrome, and Firefox on OS X; all three behaved identically.)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
</head>
<body>
I want to get this text
<script>
var test=function()
{}
</script>
</body>
</html>
and the result is:
line:7,
position :4
content:
var test=function()
{}
Have you tried the HTML Agility Pack?
This typically works quite well and gives you a nice intuitive interface into parsing HTML content.
You should be able to use it something like this:
HtmlDocument doc = new HtmlDocument();
doc.Load("yourfile.html");
foreach(HtmlNode link in doc.DocumentElement.SelectNodes("//script)
{
// do something with your script nodes
}
Please can someone tell me why this isn't working before I defenestrate everything on my desk.
I have the following html document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8 />
<title>Sample Gauge using JQuery</title>
</head>
<body>
<canvas id="gauge" width="200" height="200">
Your web browser does not support HTML 5 because you fail.
</canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="gauge.js"></script>
</body>
</html>
And gauge.js:
$(document).ready(function () {
//(canvas gets assigned)
startRendering();
function startRendering() {
setInterval("render();", 1000);
}
function render() {
renderBackground();
renderNeedle(-172);
}
//(Defined functions for rendering a gauge)
});
render() does not get called, but if I change the setInterval line to just 'render()' it does.
Also, if I change setInterval() to contain something like "alert('LOL')" then it does work, it just doesn't seem to work with functions I have defined.
With or without a semicolon at the end of the function(s) to call makes no difference, nor does prefixing this. to my functions.
I'm trying to get this working so I can start using it to animate the gauge. Can anyone see why it isn't working?
I hate web development.
Change
setInterval("render();", 1000);
To
setInterval(render, 1000);
When you pass a string to setInterval(), the code inside is executed outside of the current scope. It's much more appropriate to just pass the function anyway. Functions can be passed around just like any other variable if you leave the parenthesis off.
I'm not sure why using just "render()" doesn't work but using this code will fix the problem.
function startRendering() {
setInterval(function(){
render()
}, 1000);
}