I want to use html5 video tag to play my video.
How can I set the time from which the video starts playing.
for example my video is 90 seconds long i want to start playing at 30 seconds
<video width="320" height="240" controls>
<source src="<?php echo base_url() ?>/programs/prg1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
please help me
From http://blog.grio.com/2012/08/how-to-seek-an-html5-video-at-a-specific-time-on-load.html
How To Seek an HTML5 Video at A Specific Time On Loadby Peter Tubig
HTML:
<video id="video1" width="320" height="240">
<source src="movie.mp4" type="video/mp4" />
</video>
Javascript:
document.getElementById("video1").currentTime = 10;
The Javascript statement sets the video1 video’s current time to the 10-second mark. However, this will only work if the browser has already loaded the video’s metadata. The metadata contains pertinent video information such as dimensions and duration. Knowing the video’s duration is required for the browser to seek the video. If it doesn’t have that, then current time will not be set (remains 0). A scenario where this could happen is when a webpage wants to play a video at a specific time when the page loads.
Html :
<video width="400" controls id="VideoId">
<source src="Intro.mp4" type="video/mp4">
</video>`
JavaScript:
var video = document.getElementsByTagName("video")[0];
video.currentTime = 40.066667;
you can also use get elementbyid
In html
<video id="player" width="320" height="240" src="video1.ogv" type="video/ogg" controls="controls">
</video>
and the java script:
<script language="javascript">
var video1 = "video1.ogv";
var video2 = "video2.ogv";
var player = document.getElementById("player");
player.setAttribute("ontimeupdate", "update();");
var time = 0.0;
var toUpdate = false;
function changeVideo() {
time = player.currentTime;
if (player.src.match(video1+"$") == video1)
player.src = video2;
else
player.src = video1;
player.load();
toUpdate = true;
player.play();
}
function update() {
if (flag) {
player.currentTime = time;
toUpdate = false;
}
}
</script>
Related
So, I have tried for ages now it seems to track multiple Embedded videos on my test-site with Adobes SiteCatalyst.
Below is the link with documentation I've used
https://gist.github.com/KamalChembath/00106eb266c91777c32e
The problem I've tried to solve is that I want to be able to listen/track already embedded videos, and not actually create the videos using the API and THEN listen to them.
But the documentation "appends" an iframe created by the API into an empty div that needs to have the same id as the iframe id.
But since the embedded video is already there, I don't need this part, obviously.
Please feel free to ask questions if I'm not clear enough.
Anyone had this issue before?
Below is some changes I've made to try to make it append two players into two divs(trying to hack the code I've already got) Putting it all into a for-loop.
Regards everyone!
<div id="player123">
iframe id="player123" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/-yKNuU8biQo?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
</div>
<div id="player1234">
<iframe id="player1234" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/VyK-JhjPguY?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
</div>
<script>
var iframeObject = document.getElementsByTagName('iframe');
for ( var i = 0; i < iframeObject.length; i++){
var youtube_id = iframeObject[i].id;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(youtube_id, {
videoId: iframeObject[i].src.substring(29, 40),
events: {
'onStateChange': onPlayerStateChange,
'onError' : onPlayerError
}
});
}
</script>
We have implemented google +1 buttons on our site and they have served reliably for some time. However we recently noticed that the buttons are not serving reliably. We rarely see them appear in their designated spaces.
For example on this page: Sample Page : you'll see a gray box of social buttons to left of the page. In it, there is SUPPOSED to be a Google +1 button.
We've requested the button with this code:
<div id="social-google" class="social">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium"></g:plusone>
</div>
We've also tried this code:
<div id="social-google" class="social">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-size="small" data-annotation="bubble"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
Occasionally we'll see a Google +1 button render but, more often than not, the space reserved for the button is apparently blank. When you examine things with firebug, you see that Google HAS attempted to render a button, but for some reason it has placed the button far above and left of the page boundaries.
Here is the top of the html Google generates for the button:
<div id="___plusone_0" style="position: absolute; width: 450px; left: -10000px;">
<iframe id="I0_1377554650466" width="100%" scrolling="no" frameborder="0" hspace="0 marginheight="0" marginwidth="0" style="position:absolute;top:-10000px;width:450px;margin:0px;border-style:none" tabindex="0" vspace="0" name="I0_1377554650466" src="https://apis.google.com/_/+1/fastbutton?bsv=o&usegapi=1&size=medium&hl=en-US&origin=http%3A%2F%2Fwww.comicbookresources.com&url=http%3A%2F%2Fwww.comicbookresources.com%2F%3Fpage%3Darticle%26id%3D47537&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps- ...
As you can see Google gave its generated ___plusone_0 div a left position of -10000px and gave the inner iFrame a top position of -10000px. So the button is there. It's just floating out in space. If I manipulate theses position settings (to 0px) the button becomes visible in its appropriate spot.
Any idea why this would happen? Any idea how we can fix this?
You can try adding the following CSS declaration to your stylesheet:
#___plusone_0, #___plusone_0 iframe {
position:static !important;
}
This is a hackaround, so don't depend on it in long term.
Based on an old thread in Drupal Issues.
During the last few days I'm suffering from this problem too. I have a page building app. One of the widgets is google plus: users can enter a url, and the app generates a button. (So there can be more, than 1 button on the page.) Then user saves the page and can see it on Facebook.
Recommendations and observations...
Double check the protocol of google api script. For example, if your website is on https and you are trying to load http://apis.google.com/js/plusone.js, your buttons will probably fail to render.
When I tested this issue on my server, I occasionally opened the app in 2 browser tabs at the same time. Google buttons didn't appear in the first tab, but they did in the second one!
My app requires user to be authorized on Facebook. When I opened the app without authorization, the buttons were shown as expected. But when I logged in and refreshed the page - buttons disappeared.
When I opened the page on Facebook, buttons didn't appear, regardless of whether I was logged in or not.
I beg your pardon, if you think these notices have no sense, but they may save someone's time in future.
Workaround
Suppose, you're parsing the following code:
<!-- google button will be added into this div -->
<div class="googlePlus" data-href="http://google.com"></div>
jQuery function, which parse all .googlePlus divs.
$('.googlePlus').each(function () {
var $googleDiv = $(this);
// check, if button is already parsed
if (!$googleDiv.children().length) {
// add temporary id to the parent div
var $id = 'googlePlus-' + new Date().getTime();
$div.attr({
'id': $id
});
// create, add and render btn (IE compatible method)
var gPlusOne = document.createElement('g:plusone');
gPlusOne.setAttribute('href', $googleDiv.attr('data-href'));
document.getElementById($id).appendChild(gPlusOne);
gapi.plusone.go($id);
// function, correcting css styles
if (!$.isFunction($.fn.fixGooglePlus)) {
$.fn.fixGooglePlus = function () {
$(this).children('div').children('iframe').addBack().css({
position: 'static',
width: 106,
height: 24
});
}
}
// run function, until css is fixed
var $timer = setInterval(function () {
$googleDiv.fixGooglePlus();
if ($googleDiv.find('iframe').css('position') == 'static') {
clearInterval($timer);
$googleDiv.removeAttr('id');
}
}, 100);
} // button hasn't been parsed
});
Put the button code in a a new HTML file and put that file in an iframe. Compared to #U-D13's answer, it's less susceptible to changes by Google.
I have a frameset where in one frame have a button that minimize its parent frameset to a certain size.
The code works but the problem is if I choose to resize frame with my mouse manually first and then press the minimize button it will resize incorrectly in IE8 and Chrome. It resize correctly in FF.
I have this HTML structure
...
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
<frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
<!-- The minimize button are in this frame searchResultFrame -->
<frame name="searchResultFrame" scrolling="no" src="dummy">
<frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
<frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
...
and this code that executes when pressing on the button.
// Minimize frame button
$('.minimizeFrame').toggle(function () {
parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','22,*');
}, function () {
parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','32%,*');
});
I can see that cols="32%,*" changes to cols="22,*" in the developer tools, but still it render in wrong size.
Why do it resize incorrectly after changes by the mouse? Am I missing something or is it a bug in browser? Or are there maybe an alternative solution to resize the frame without this bug?
Example
http://jsbin.com/ohihiy/2
Looks like it's this bug in Webkit that has been ignored since 2010:
https://bugs.webkit.org/show_bug.cgi?id=36584
This worked for me. I created a function that "resets" cols and "later" sets correct widths. It seems there must be a timeout after reset or a kind of loop that "touches" child frames
function init_page() {
function setCols(frms, cols) {
// for some magic reason we have to 1st -> reset current cols
frms.setAttribute('cols', '');
// and 2nd ask about child width (it's now clientWidth)
for (var i = 0; i < frms.children.length; ++i) {
if (frms.children[i] && (typeof frms.children[i].clientWidth != "undefined" || typeof frms.children[i].width != "undefined")) {
}
}
frms.setAttribute('cols', cols);
}
// Minimize frame button
$('#minimizeButton')
.toggle(function () {
setCols(parent.document.getElementsByTagName('frameset')[0], '50,*');
},
function () {
setCols(parent.document.getElementsByTagName('frameset')[0], '50%,*');
});
}
If I understand correctly your trying to set an attribute of an object that's in a different frame.
Some browsers don't accept that.
If I try to reproduce your problem I can see that in firefox I can toggle the frame's size (no problem).
In chromium however, I get a security error because I'm trying to set a property on another page namely the frameset page from within a page inside a frame.
edit: The following code works in IE8. Is that what you need?
Don't forget to add the jquery-1.8.2.min.js file
file: index.html
<!doctype html public "-//w3c//dtd html 4.01 frameset//en"
"http://www.w3.org/tr/html4/frameset.dtd">
<html>
<head>
<title>a simple frameset document</title>
</head>
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
<frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
<!-- The minimize button are in this frame searchResultFrame -->
<frame name="searchResultFrame" scrolling="no" src="frame1.html">
<frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
<frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
</html>
file: frame1.html
<html>
<head>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(init_page);
function init_page()
{
// Minimize frame button
$('#minimizeButton')
.toggle(function ()
{
parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','22,*');
},
function ()
{
parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','32%,*');
});
}
</script>
</head>
<body>
<button id='minimizeButton'>toggle</button>
</body>
</html>
I was having the same issue, and I used the suggestion of hiding, then setting and then reappearing and it worked for me. See below example:
var $frames = $( <parentElement> ).find( '<framesetname>' )[ 0 ];
frames.hide().attr('cols', '*,500').show();
They worked for Chrome, Firefox, IE11 & Opera.
Hope it works for you.
I am creating an openlaszlo application where an html tag will be present and i have some components that are draggable in the swf. I want to drag these components over the html. This is not possible.
So what i am thinking of is to take a screenshot of the html content and replace it with the actual html content when i need to drag over it.
Theoretically this should be possible and it's possible in flex I verified my self. I am trying to do the same thing in Openlaszlo. But i am not getting any leads
So far i have tried like this
And i am getting an error that the html tag is not object of IBitmapDrawable
<canvas width="800" height="600" bgcolor="white" debug="true">
<script when="immediate"><![CDATA[
class MagUtils {
#passthrough (toplevel: true) {
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.*;
import flash.events.MouseEvent;
import mx.graphics.ImageSnapshot;
import flash.utils.ByteArray;
import flash.display.IBitmapDrawable;
}#
var temp:lz.view;
var colorTransform:ColorTransform;
var rect:Rectangle;
public function snap (m:IBitmapDrawable, t:lz.view):void {
temp = t;
var temp_mc = temp.sprite; // getMCRef();
var mainView_mc = main.sprite; // getMCRef();
var scale = 1;
var x;
var y;
var w;
var h;
var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(m);
var imageByteArray:ByteArray = imageSnap.data;
colorTransform = new flash.geom.ColorTransform();
rect = new flash.geom.Rectangle(0, 0, temp.width, temp.height);
var bitmap:BitmapData = new flash.display.BitmapData(w, h, false);
bitmap.setPixels(rect, imageByteArray);
var bm:Bitmap = new Bitmap(bitmap);
temp.sprite.addChild (bm);
bitmap = null;
}
}
lz.MagUtils = new MagUtils();
]]>
</script>
<button name="magnifier" text="magnifyingtool" >
<handler name="onclick">
lz.MagUtils.snap(canvas.main.ht,canvas.temp);
</handler>
</button>
<view name="main" x="5" y="15" width="200" height="200" bgcolor="yellow">
<html name="ht" width="200" height="200" src="http:hello.html"/>
</view>
<view id="temp" name="temp" x="5" y="300" visible="true" width="200" height="200" bgcolor="gray">
</view>
</canvas>
And the HTML Content is
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<TITLE>
A Small Hello
</TITLE>
</HEAD>
<BODY>
<H1>Hi</H1>
<P>Test Page</P>
</BODY>
</HTML>
It's no possible to take a screenshot in Flash of elements which are not managed by the Flash display list, which includes iFrame content placed below the SWF movie in the browser. And that seems to be what you are trying to do.
If you want to drag a visual object from the iFrame into the SWF movie area, one approach might be to render the content in HTML into an HTML5 canvas element, extract the bitmap data and push that into the SWF movie to be displayed in an OpenLaszlo view. But that would mean that all visual elements you want to drag need to be drawn into an HTML5 canvas.
Here is an example where uses Flash Player's filter functionality to apply the filter to an image in an HTML5 canvas element:
http://www.quasimondo.com/archives/000695.php
Here are the links to the relevant files for this example:
The HTML page embedding an invisible SWF for processing the image.
JavaScript file with functions for sending the data to the SWF movie clip.
ActionScript class processing the image data sent from JavaScript, and passing the processed data back to the HTML page.
But I'm not sure that all the content you have in your iFrame can be rendered into a canvas element.
For some reason I'm sure the folks at DivX think is important, there is no straightforward way to prevent their plugin from replacing all video elements on your page with they fancy logo.
What I need is a workaround for this, telling the plugin to skip some videos, i.e. not replace them with their playable content.
I got around this by putting an empty HTML 5 video tag, then putting in the video source tags in a JavaScript function in the body onload event. The video then comes up in the normal HTML 5 player and not the DivX web player.
e.g.
This would give the DivX player:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
But this would give the normal html 5 player:
<head>
<script type="text/javascript">
function changevid() {
document.getElementById('vid').innerHTML = '<source src="inc/videos/sample1.mp4" type="video/mp4" />';
document.getElementById('vid').load();
}
</script>
</head>
<body onload="changevid()">
<video id="vid" width="800" height="450" controls="controls">
</video>
</body>
At this time, there is no API or means to block the divx plugin from replacing video elements with their placeholder. :-(
i started reverse-engineering the divx-plugin to find out what can be done to hack a way into disabling it. An example, including the complete sourcecode of the divx-plugin, can be found here: http://jsfiddle.net/z4JPB/1/
It currently appears to me that a possible solution could work like this:
create a "clean" backup of the methods appendChild, replaceChild and insertBefore - this has to happen before the content-script from the chrome-extension is executed.
the content-script will execute, overrides the methods mentioned above and adds event-listeners to the DOMNodeInsertedIntoDocument and DOMNodeInserted events
after that, the event-listeners can be removed and the original DOM-Methods restored. You should now be able to replace the embed-elements created by the plugin with the video-elements
It seems, that the plugin is only replacing the video when there are src elements within the video tag. For me it worked by first adding the video tag, and then - in a second thread - add the src tags. However, this doesn´t work in IE but IE had no problem with an insertion of the complete video tag at once.
So following code worked for me in all browsers (of course, jQuery required):
var $container = $('video_container');
var video = 'my-movie';
var videoSrc = '<source src="video/'+video+'.mp4" type="video/mp4"></source>' +
'<source src="video/'+video+'.webm" type="video/webm"></source>' +
'<source src="video/'+video+'.ogv" type="video/ogg"></source>';
if(!$.browser.msie) {
$container.html('<video autoplay loop></video>');
// this timeout avoids divx player to be triggered
setTimeout(function() {
$container.find('video').html(videoSrc);
}, 50);
}
else {
// IE has no problem with divx player, so we add the src in the same thread
$container.html('<video autoplay loop>' + videoSrc + '</video>');
}