How to play video from youku using javascript ?
I tried to do like this but not work, how can i do that ?
<iframe id="test" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA==" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 50%; height: 50%;"></iframe>
<div style=" position: fixed; top: 56%; " onclick="play_fn()">Play</div>
<script>
function play_fn(){
var test = document.getElementById('test');
test.play();
}
</script>
play() is a method found on <video> and <audio> elements. An <iframe> is just a means to embed a URL in a page. It provides no API for playing media.
Unless youku provide an API that you can access (I couldn't find one with a quick search), then there is no way to trigger playback from your page.
Standard cross origin security restrictions imposed by browsers prevent you manipulating the embedded page with JavaScript.
Check my solution. You can figure out the styles for your own case, I'm using the span as overlay above the video and when you click on it, it disappears and the video plays.
const videoSection = document.querySelector('.video');
if(videoSection) {
const playBtn = document.querySelector('.play-btn');
playBtn.addEventListener('click', playVideo);
}
function playVideo() {
const iframeHolder = document.querySelector('.iframe-holder');
const iframeEl = document.querySelector('.iframe-holder iframe');
const playStr = '?autoplay=true';
let baseUrl = iframeEl.getAttribute('src');
iframeHolder.classList.add('play');
iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
iframeEl.setAttribute('allow', 'autoplay');
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Title</title>
</head>
<body>
<div class="video">
<span class='play-btn'></span>
<iframe allowfullscreen="" frameborder="0" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
</div>
</body>
</html>
const videoSection = document.querySelector('.video');
if(videoSection) {
const playBtn = document.querySelector('.play-btn');
playBtn.addEventListener('click', playVideo);
}
function playVideo() {
const iframeHolder = document.querySelector('.iframe-holder');
const iframeEl = document.querySelector('.iframe-holder iframe');
const playStr = '?autoplay=true';
let baseUrl = iframeEl.getAttribute('src');
iframeHolder.classList.add('play');
iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
iframeEl.setAttribute('allow', 'autoplay');
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Title</title>
</head>
<body>
<div class="video">
<span class='play-btn'></span>
<iframe allowfullscreen="" frameborder="0" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
</div>
</body>
</html>
Refer this code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#overlay {
position: absolute;
top: 100px;
color: #FFF;
text-align: center;
font-size: 20px;
background-color: rgba(221, 221, 221, 0.3);
width: 640px;
padding: 10px 0;
z-index: 2147483647;
}
#v {
z-index: 1;
}
</style>
<title>Overlay HTML over video player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload=function() {
var video = document.getElementById('v');
video.play();
}//]]>
</script>
</head>
<body>
<video id="v" controls="">
<source id="webm" src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay" style='display: none;'>This is HTML overlay on top of the video! </div>
</body>
</html>
Related
I got this image url
https://images.lvrcdn.com/MediumRetina75I/DL1/101_266d32b0-4f23-4cca-b1c2-a8b7bb27dbb0.JPG
I need to enable preview to use it in discord embeds for example, but site hasn't enabled the link preview.
Cause image urls are different from the same website I made a html page with javascript code to display image and preview's metadata taking image url from url parameter eg: my website.html?url=imageurl/name.png.
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<!-- open graph -->
<!-- Informations -->
<meta property="og:description" content="OPEN_GRAPH_DESCRIPTION" />
<meta property="og:title" content="OPEN_GRAPH_TITLE" />
<meta property="og:type" content="website" />
<meta property="og:url" content="WEBSITE_URL" />
<!-- Image -->
<meta id="meta1" property="og:image" content />
<meta property="og:image:alt" content="Website icon" />
<meta property="og:image:height" content="80" />
<meta id="meta2" property="og:image:secure_url" content/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="80" />
<meta property="og:locale" content="en_GB" />
<!-- ... --->
<script type="text/javascript">
function getParameter(paramName) {
var searchString = window.location.search.substring(1), i, val, params = searchString.split("&");
for ( i = 0; i < params.length; i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return val[1];
}
}
return null;
}
function getUrlData() {
var param = getParameter("ref");
document.getElementsByName("img-area")[0].src = param;
document.getElementById("meta1").setAttribute("content", param);
document.getElementById("meta2").setAttribute("content", param);
}
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
</script>
<title>Preview</title>
</head>
<body style="margin: 0px; background: #0e0e0e; height: 100%" onload="getUrlData()">
<img id = "preview" name="img-area" src style="display: block; margin: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);" alt="prev">
<canvas id="myCanvas" />
<!-- ... --->
</body>
</html>
If I go to my website link with the image url in parameter it is working well, it displays the image and correct metadata.
But it is still not showing the image in preview, but only the description and titles tag.
How can I show image in the link preview too?
Hey everyone i am trying to console.log top property of an element in javascript but i only thing i see in the console is a blank line.
Also when i try to console.dir element i the top property is an empty string even though i set the top property to 100px.
Question is how do i display the top propert of an element using .style.top
CSS
img {
width: 100px;
position: absolute;
top: 100px;
left: 10px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Coin Game Starter</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
<img id="coin" src="https://myrealdomain.com/images/gold-coin-gif-1.gif" alt="">
<script src="app.js"></script>
</body>
</html>
JS
let player = document.querySelector("#player").style.top
console.log(player)
To get the CSS properties to Javascript.
var element = document.getElementById('player');
var styles = window.getComputedStyle(element);
var top = styles.getPropertyValue('top');
console.log(top); // 100px
With my code, I made an array for JavaScript to randomly choose an image and display it. But its not showing. Please help.
This is my code currently:
HTML & JS
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
<body>
<html>
<script>
function GetImage()
{
var imagearray= new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg","https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg","https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900","https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
}
$("#img1").attr("src", imagearray[randomimagesrc]);
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
You need to move $("#img1").attr(...) inside the GetImage() function. Also, since you are accessing a random element in randomimagesrc, there is no need to do imagearray[randomimagesrc] while setting the src.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage()" id="imagebtn">
Begin!
</button>
<body>
<html>
<script>
function GetImage() {
var imagearray = new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg", "https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg", "https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900", "https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
$("#img1").attr("src", randomimagesrc);
}
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
You have provided change src sript outside the GetImage() function and when you already have created new variable which is random, then you can use it directly in randomimagesrc
function GetImage()
{
var imagearray= new Array(
"https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg",
"https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg",
"https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900",
"https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg"
);
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
$("#img1").attr("src", randomimagesrc);
}
#img1 {
size: 400px;
z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
The problems you had:
You had html lang="en">. You forgot to add an extra < before that code.
Secondly, I think it would be better if the script and style tag were inside the html tag.
I recommend using HTML DOM over jQuery.
Also put the HTML dom inside the function.
Now you're done!
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" /> <br>
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
<body>
<script>
function GetImage()
{
var imagearray= new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg","https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg","https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900","https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
document.getElementById('img1').src = randomimagesrc;
}
$("#img1").attr("src", imagearray[randomimagesrc]);
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
<html>
Here's your new code.
Edit: Forgot to add that you can make the picture fixed size, so you don't need to chase the button.
<style>
img#img1 {
width: 100px;
height: 100px;
}
</style>
So I have the following in my page which is a textarea with some text in it:
and what i want to do now is to replace the BR in the text with newline \r such that i would get the following displayed in the textarea:
Hi
I
Am
Jake
Here's what I tried so far:
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace("<BR>","\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
However, it doesn't seem to be displaying properly. Would appreciate some help on this.
Use replaceAll() instead of replace(). The replace function will replace only the first match, replaceAll() will replace all the occurrences in the given string.
I also suggest escaped strings in the replace parameters. Add backslash (\) in your < > characters.
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replaceAll("\<BR\>","\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
JavaScript's replace function only replaces the first instance. You can, however, use regex with the /g flag. I replaced "<BR>" with /<BR>/g, and it works (you just have to scroll). If you're interested, there is also String.prototype.replaceAll, but that doesn't have that good browser support.
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace(/<BR>/g,"\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
Use .value.split("<BR>").join("\n") instead of .value.replace("<BR>", "\n")
document.getElementById("sample").value = document.getElementById("sample").value.split("<BR>").join("\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
Here is my solution:
document.getElementById("sample").value = document.getElementById("sample").value.replace(/\<BR\>/g,"\n").trim();
I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX