I have several kinds of videos, like this
<video id='abd' height="200" width="200" ></video>
<embed id='bcd' height="200" width="200" ></embed>
<object id='cde' height="200" width="200" ></object>
I have calculated target position like this
<script>
var vid=document.getElementById('abd');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var div = '<div>Heloo</div>';
</script>
Now i want to put a div at position (x,y).
How can i do this. div is stored in var div, Is there any way to do this perfectly,
Your help will be greatful
Thanks
You can do this using pure CSS - no JS required!
The HTML
<div id="video-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe>
<div class="video-overlay">
Overay Content
</div>
</div>
The CSS
#video-container {
position:relative;
width:420px;
}
.video-overlay {
position:absolute;
top:50px;
right:50px;
background:#000;
color:#FFF;
}
See it in action
http://jsfiddle.net/y28Zs/
try this
http://jsfiddle.net/miquelcamps/BJN8x/3/
html
<video id="embed" width="200" height="200" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
javascript
var vid = document.getElementById('embed');
var width = vid.width;
var height = vid.height;
var x = vid.offsetLeft;
var y = vid.offsetTop;
var div = '<div class="overlay" style="height:'+height+'px;width:'+width+'px;left:'+x+'px;top:'+y+'px;">Hello</div>';
document.body.innerHTML += div;
css
.overlay{
position:absolute;
background:red;
z-index:99;
}
Please check is it what you want :
<div id="adds">
<video id='abd' height="200" width="200" style="border:2px solid" ></video>
</div>
Javascript ----
vid=document.getElementById('abd');
addDiv =document.getElementById('adds');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var newDiv = document.createElement("div");
newDiv.innerText = "Hello....";
newDiv.style.left = "102px";
newDiv.style.top = "108px";
newDiv.style.position = "absolute";
addDiv.appendChild(newDiv);
Live demo : (http://jsfiddle.net/7EhtL/)
Related
I have a video tag say
<div class="phone" align="center">
<div class="phone-inner">
<video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo">
<source src="vid/1.mp4" type="video/mp4">
</video>
</div>
</div>
I want to change the video when page scrolls and each time div changes like fueled.com. Say I have six divisions like
<div id="first></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
When div 2 comes into view the video should change and when div 3 or 4 comes into view video should change again to something else. Here is my code which needs to be modified according to it.
$(window).scroll(function() {
var topDivHeight = $("#first").height();
var DivTop = $("#sixth").position().top;
var viewPortSize = $(window).height();
var triggerAt = 450;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
var test1 = (topDivHeight - viewPortSize) + 650;
var count = 0;
var number = jQuery.grep(mainTops, function(n, i) {
if (n < $(window).scrollTop())
{
count++;
}
});
$('.nav ul li a').css("color", "#fff");
$('.nav ul li a#nav'+count ).css("color", "#f60");
if($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop) {
$('.phone').css('visibility', 'visible').fadeIn();
if($(window).scrollTop() >= test1){
$('#phonevideo').html('<source src="vid/2.mp4" type="video/mp4">'); // tried using this method but its not working here. Some other method needed here.
}
} else {
$('.phone').fadeOut();
}
});
Try this code:
$('#phonevideo').find("source").attr("src", "https://www.w3schools.com/tags/movie.mp4");
$('#phonevideo').get(0).load();
You can change source attribute like $('#phonevideo').find("source").attr("src","videosource")
and after changing source you need to load video $('#phonevideo').get(0).load()
You cannot directly replace the HTML as you do using function .html(), accordingly to the HTML specification
Dynamically modifying a source element and its attribute when the
element is already inserted in a video or audio element will have no
effect.
But what you can try as suggested by the document is to change what is playing, just use the src attribute on the media element directly and use function .load();
A working example below:
var btn = document.getElementById('btn'),
player = document.getElementById('phonevideo'),
source = document.getElementById('src');
btn.addEventListener('click', function(event) {
player.pause();
source.src = 'http://html5demos.com/assets/dizzy.mp4'; // change video
player.load(); // load it
});
<div class="phone" align="center">
<div class="phone-inner">
<video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo">
<source id="src" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
<button id="btn" type="button">Change Video!</button>
Using jQuery as on your example (not tested):
var player = $('#phonevideo');
player.find("source").attr("src", "http://html5demos.com/assets/dizzy.mp4");
player[0].load();
I've optimized your code. I have added a class to your divs and used the data attribute. Here is a working jsfiddle.
<div class="phone" align="center">
<div class="phone-inner">
<video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo">
<source src="vid/1.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="first" class="view" data-vid-src="vid/1.mp4"></div>
<div id="two" class="view" data-vid-src="vid/2.mp4"></div>
<div id="three" class="view" data-vid-src="vid/3.mp4"></div>
<div id="four" class="view" data-vid-src="vid/4.mp4"></div>
<div id="five" class="view" data-vid-src="vid/5.mp4"></div>
<div id="six" class="view" data-vid-src="vid/6.mp4"></div>
To see some result I have added some css:
.phone {
position: fixed;
height: 200px;
width: 120px;
background: white;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -60px;
}
.view {
height: 500px;
}
#first {
background: red;
}
#two {
background: yellow;
}
#three {
background: green;
}
#four {
background: blue;
}
#five {
background: pink;
}
#six {
background: black;
}
And now the jQuery part.
function getCurrentElement(pos) {
var len = $('.view').length;
var i = 0;
var old_pos;
var ele_pos;
var old_ele;
var return_ele;
$('.view').each(function(){
i++;
offset = $(this).offset();
ele_pos = offset.top;
if(pos == ele_pos) {
return_ele = $(this);
return;
}
else if(ele_pos > pos && old_pos < pos) {
return_ele = old_ele;
return;
}
else if(ele_pos < pos && i == len) {
return_ele = $(this);
return;
}
old_pos = ele_pos;
old_ele = $(this);
});
return return_ele;
}
var old_ele = null;
$(window).scroll(function() {
var cur_pos = $(window).scrollTop();
current_element = getCurrentElement(cur_pos);
if(old_ele != null) {
if(current_element.attr('id') != old_ele.attr('id')) {
$('#phonevideo source').attr('src',current_element.attr('data-vid-src'))
}
}
old_ele = current_element;
});
I hope this code will help you. :)
I m trying to take image from screen of live video by using canvas method. But when i press capture and press View URI button i get only blank image. I also saw this post: Javascript Canvas Blank Image but made no help.
Here is my code:
<html>
<body>
<iframe id="video" width="20%" height="419" src="http://videoplayer.vodobox.com/vodobox_player.php?vid=http://109.123.70.72:1935/live/ptvsports/samitv.m3u8&img=&play=?" frameborder="0" allowfullscreen></iframe>
<br/>
<button onClick="capture()" style="width: 64px;border: solid
2px #ccc;">Capture</button><br/>
<div id="container" style="border:none">
<canvas id="imageView" style="display:none; left: 0; top: 0; z-index: 0;border:none" width="300" height="200">
</canvas>
</div>
<div id="imgs" style="border:solid">
</div>
<script>
function getURIformcanvas() {
var ImageURItoShow = "";
var canvasFromVideo = document.getElementById("imageView");
if (canvasFromVideo.getContext) {
var ctx = canvasFromVideo.getContext("2d"); // Get the context for the canvas.canvasFromVideo.
var ImageURItoShow = canvasFromVideo.toDataURL("image/png");
}
var imgs = document.getElementById("imgs");
imgs.appendChild(Canvas2Image.convertToImage(canvasFromVideo, 300, 200, 'png'));
}
var videoId = 'video';
function capture() {
var video = document.getElementById("video");
var canvasDraw = document.getElementById('imageView');
var w = canvasDraw.width;
var h = canvasDraw.height;
var ctxDraw = canvasDraw.getContext('2d');
ctxDraw.clearRect(0, 0, w, h);
ctxDraw.drawImage(video, 0, 0, w, h);
ctxDraw.save();
getURIformcanvas();
}
</script>
</body>
</html>
output:
I have this javascript code:
function start1(dis,www){
var visina = screen.availHeight;
var content = '<div id="showRtbn" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;background: #E81515;cursor: pointer; border-radius:5px; margin-left:-15px;"> <iframe src="https://domain.com/hotel/2" style="border:0px #FFFFFF none;" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div> <div id="rtb" style="width:100%; height:100%; opacity:0; position:fixed; box-sizing: border-box; left:0px; top:0px; z-index:99999999; display:none; background:rgba(0, 0, 0, 0.8)"><iframe src="'+www+'" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb" style="background:#fff; cursor:pointer; top:15px; right:15px; z-index:9999999; position:fixed; border-radius:25px;"><img style="width:50px; height50px;" src="http://i.imgur.com/QqlcQwu.png"></div></div>';
var newNode = document.createElement("DIV");
newNode.innerHTML = content;
document.body.appendChild(newNode);
var rtb = document.getElementById("rtb"),
timer = null;
document.getElementById("showRtb").addEventListener("click", function() {
if (rtb.style.opacity != 1) {
clearTimeout(timer);
rtb.style.display = "block";
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity + .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") >= 1) {
clearInterval(timer);
}
}, 30)
}
});
document.getElementById("hideRtb").addEventListener("click", function() {
if (rtb.style.opacity != 0) {
clearTimeout(timer);
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity - .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") <= 0) {
rtb.style.display = "none";
clearInterval(timer);
}
}, 30)
}
});
}
and as you can see, I create a link inside the body with id showRtb and inside that an iframe with content, but when I click it doesn't work, doesn't want to show div with id rtb ...
When I change the content so instead of an iframe I post an image, then it works well, but now with the iframe it doesn't work. Why? What is the problem?
So, I want when I click on showRtb to open div with ID rtb ...
UPDATE:
var content = '<div id="showRtb1" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;cursor: pointer; border-radius:5px; margin-left:-15px;"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="showRtb" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 99999999;cursor: pointer; opacity:0; pointer; border-radius:5px; margin-left:-15px;"></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Change this:
var content = '<div id="showRtbn"> <iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
To be something like:
var content = '<div id="showRtbn"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div>Show RTB<div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Remove the iFrame from within the anchor tags (<a>..</a>) and you can set its containing <div> as hidden. NOTE: I've removed your styles. You should consider moving them into a stylesheet
JS:
document.getElementById("showRtb").addEventListener("click", function() {
rtb.style.display = "block";
console.log("clicked");
});
I was working on a menu to change my videojs source and it works partly. I can change my video source with $video_obj.src but i unable to change my tags like nonHD or even classes style .vjs-poster.
something I forgot?
$("ul.dl-menu a").click(function() {
var $myClass = $(this).attr("class");
var $target = $(this).attr("id");
var $content_path = "~path~/media-video/";
var $thumbs = "~path~/media-video/thumbs/";
if ($myClass === "library") {
var $vid_obj = videojs("div_video");
var $video_div = "div_video";
}
else {
var $vid_obj = videojs("div_video_awards");
var $video_div = "div_video_awards";
}
$vid_obj.ready(function() {
$($video_div+'.poster').hide();
$($video_div+'_html5_api').hide();
$vid_obj.pause();
$($video_div+'video source:nth-child(1)').attr("src",$content_path+'mp4/'+$target+'.mp4');
$vid_obj.src({ type: "video/mp4", src: $content_path+'mp4/'+$target+'.mp4' });
$($video_div+'video').attr("src",$content_path+'mp4/'+$target+'.mp4');
$($video_div).attr("nonHD",$content_path+'mp4/'+$target+'.mp4');
$($video_div).attr("HD",$content_path+'mp4-720p/'+$target+'.mp4');
$($video_div+'video').attr("HD",$content_path+'mp4-720p/'+$target+'.mp4');
$($video_div+'video').attr("nonHD",$content_path+'mp4/'+$target+'.mp4');
$($video_div+'.vjs-poster').attr("style", 'background-image: url('+$thumbs+$target+'.jpg);');
$($video_div+'.vjs-tech').attr("poster",$thumbs+$target+".jpg").show();
$($video_div).attr('poster',$thumbs+$target+'.jpg');
$($video_div).removeClass('vjs-playing').addClass('vjs-paused');
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".vjs-control.vjs-HD-button { color: silver; font-weight:normal; text-shadow: 0 0 5em #fff;}";
document.body.appendChild(css);
HD1 = false;
$vid_obj.load();
$($video_div+'_html5_api').show();
setTimeout(function(){
$vid_obj.play();
}, 0);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="div_video" class="video-js vjs-sublime-skin vjs-big-play-centered" width="auto" height="auto" poster="http://video-js.zencoder.com/oceans-clip.png" HD="http://video-js.zencoder.com/oceans-clip.mp4" nonHD="http://video-js.zencoder.com/oceans-clip.mp4" controls>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
</video>
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Menu</button>
<ul class="dl-menu">
<li><a class="library" href="javascript:;" id="MBHD0790-03">Into the Woods</a></li>
<li><a class="library" href="javascript:;" id="MBHD0790-04">Kingsman</a></li>
</ul>
</div>
Well, given this:
$($video_div+'video').attr("nonHD",$content_path+'mp4/'+$target+'.mp4');
you'd be doing
$('video_divvideo').attr(....);
There's no #, so javascript will be looking for a tag like <video_divvideo> in the dom, which of course doesn't exist.
Maybe you want
$('#' +$video_div).attr(...);
instead?
I have a source code. I use tag canvas in code HTML. I have one tag div before 11 tag Canvas and two tag div behind tag canvas. When I run the code the error occurred.
If I set property of height for canvas < 50px then arrow hidden.
And if I don't set property of heigth of canvas. When I run the code, the display: tag div MISSSSS and MOMMMMM between tag canvas. Sorry I don't post image display because I do not has the right.
I want to MISSSSSS and MOMMMMMM behind canvas.
And I want set property of height for canvas = 30px don't hidden arrow.
Live example on the JSFiddle
HTML:
<div>LOLLL</div>
<div style="height:30px;">
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_1" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
</div>
<div>MISSSSSS</div>
<div>MOMMMM</div>
Javascript:
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
var t = setTimeout("resize()", 200);
else
resize();
function resize() {
var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var targetWidth = 800;
var targetHeight = 600;
window.resizeBy(targetWidth-innerWidth, targetHeight-innerHeight);
}
function canvas_arrow(context, fromx, fromy, tox, toy){
var headlen = 20; // length of head in pixels
var dx = tox-fromx;
var dy = toy-fromy;
var angle = Math.atan2(dy,dx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineWidth=2;
//context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
}
$('document').ready(function(){
var count= parseInt($("canvas").length);
for(var i=0; i< count; i++){
var ctx= $("canvas")[i].getContext('2d');
var temp= $("canvas")[i].id;
if(temp.indexOf("text") != -1){
ctx.font="15px Times New Roman";
ctx.fillText("I Love My Mom",10,10);
}
else{
if(temp.indexOf("arrow") != -1){
ctx.beginPath();
canvas_arrow(ctx,10,10,100,10);
ctx.stroke();
}
}
}
});
I'm confused about what your goal is, but try overflow:hidden; in addition to height: 30px;
https://jsfiddle.net/9j7vx5dz/2/