<head>
var Start = new Audio("MySound.mp3");
</head>
<body>
<div>
<img src="MyPicture.png" width="400" height="300" onmouseover="Start.play();" onmouseout="Start.pause;"></img>
</div>
</body>
When hovering over the image the sound plays correctly but when I mouseout the sound continues playing? Not too sure why that is.
Change from onmouseout="Start.pause;"> to onmouseout="Start.pause();">. You missed the parenthesis in the pause function
Related
I am trying to show the time on hover of seek bar of a html5 video. ( similar to how youtube does it).
I have tried to use the timeupdate event on the video as below but looks like there is more to it.
<script>
function myFunction(event) {
// The currentTime property
document.getElementById("demo").innerHTML = event.currentTime;
var video = event;
video.addEventListener('progress', function() {
var bufferedEnd = video.buffered.end(video.buffered.length - 1);
var duration = video.duration.toFixed(1);
alert(duration);
if (duration > 0) {
document.getElementById('buffered-amount').style.width = ((bufferedEnd / duration)*100) + "%";
}
});
// display the current and remaining times
video.addEventListener("timeupdate", function () {
// Current time
var vTime = video.currentTime;
var vLength = video.duration.toFixed(1);
document.getElementById("curTime").textContent = vTime.toFixed(1);
document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);
}
</script>
html:
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<div class="buffered">
<span id="buffered-amount"></span>
</div>
<div class="progress">
<span id="progress-amount"></span>
</div>
<p>Playback position: <span id="demo"></span></p>
<p>Current Time: <span id="curTime"></span></p>
<p>Remaining Time: <span id="vRemaining"></span></p>
I did try to understand multiple posts but did not find a solution.
Do I need to use onmouseover event instead? How do I calculate the time of the video frame when the user positions the mouse on the slider?
I would make a custom controls something like this:
Using the width of the controls div and video.duration to calculate the new time.
Hope this helps!
window.onload = function(){
controls.innerText = ''
function getNewTime(e){
return e.clientX / controls.clientWidth * video.duration
}
controls.addEventListener('mousemove', function(e){
controls.innerText = (getNewTime(e).toFixed(2))
})
controls.addEventListener('click', function(e){
video.currentTime = getNewTime(e)
})
video.addEventListener('click', function(){
video.play()
}
)
}
body{
margin:0;
background:black;
}
#wrapper{
display:flex;
flex-direction:column;
}
#video{
flex:1;
height:calc(100vh - 32px);
}
#controls{
height:32px;
background:red;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom Video Control</title>
</head>
<body>
<div id='wrapper'>
<video id='video' src='http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'></video>
<div id='controls'>loading</div>
</div>
</body>
</html>
edit: to clarify my answer
If you look at the code: e.clientX / controls.clientWidth * video.duration you will see that
e.clientX is the current x position of your mouse on the controls rectangle.
controls.clientWidth is the total width of the controls rectangle.
video.duration is the total time of the video.
so if I would put my mouse on the end of the of the rectanlge. I would get 100% of the video duration. and in the beginning I would get 0%. if I would put my mouse at exactly in the middle I would get exactly the time of the middle of the video.
with video.currentTime I can change the current time of the video so that the frame is exactly the right frame of the time.
Try using controls attribute. You will get similar control bar that is present on YouTube videos.
If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
https://developer.mozilla.org/pl/docs/Web/HTML/Element/video
Example in code.pen:(wait for video to load)
http://codepen.io/mikemoney/pen/QdQvXY
Example on SO: (wait for video to load)
<video src="http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4" autoplay poster="https://i.ytimg.com/vi/1iGy1Rp93o4/maxresdefault.jpg" controls width="480">
</video>
The problem I have - the content of an HTTP canvas disappears, when I have a tooltip on a button that opens a new tab.
This is a very specific symptom, so I'd try to walk you through it.
I'm able to reproduce it with the following HTML, but not in a plunker or jsfiddle unfortunately:
<html>
<head>
<style>
.container {
height: 300px;
width: 300px;
}
canvas {
border: 1px solid black
}
button {
margin-top: 15px;
}
</style>
</head>
<body ng-app="CanvasTooltipApp">
<div ng-controller="CanvasTooltipCtrl" class="container">
<canvas id="myCanvas" height="300"></canvas>
<button type="button" ng-click="clickMe()" tooltip="The Tooltip Text">Click Me</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script>
angular.module('CanvasTooltipApp', ['ui.bootstrap']);
angular.module('CanvasTooltipApp').config(function($tooltipProvider) {
$tooltipProvider.options({popupDelay: 1500});
});
angular.module('CanvasTooltipApp').controller('CanvasTooltipCtrl', function($scope) {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
$scope.clickMe = function() {
window.open('http://www.google.com', '_blank');
};
});
</script>
</body>
</html>
It is reproduced only on Chrome 49 on a Mac.
To reproduce: click on the button (before the tooltip appears!), a new tab would be opened. Wait a few secs. Perhaps open another new tab. Then close all tabs and go back to the original tab. The shape of the canvas should disappear.
I use AngularJS 1.3.15 and angular-ui-bootstrap 0.14.3.
It does not seem to be reproduced with a plain bootstrap tooltip.
Only with the angular-ui-bootstrap it is reproduced.
Upgrading the angular-ui-bootstrap version does not help.
It is not reproduced on other browsers, or on other OSs.
That's it, I think.
I hope you even succeed in reproducing it without a plunker/fiddle.
Thank you very much in any case!
Daniel
I've hit this myself, though in slightly different circumstances (Canvas disappearing on Chrome 49 on OS X, looks like a bug), and have a plunker:
https://plnkr.co/edit/z4x9i8qqfjTOJDxihaG4
Windowed mode (where the symptom manifests):
https://run.plnkr.co/gl9nbHY1044dEJUI/
HTML:
<div>
<div>
<input type="number" class="form-control" placeholder="Focus here" />
</div>
<div>
<div>
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series">
</canvas>
</div>
</div>
</div>
Looks like the same issue. I've filed a Chrome bug report.
Essentially, I would like to know the best way to toggle between two img or div on a user click. So, first the play image is visible and when user clicks, play image is hidden and pause image is shown. When user clicks pause image, pause image is hidden and play image is shown.
I tried using an ng-show but I could only figure out how to show both images without hiding the other. So, a play image would be next to the pause image, which is not ideal.
Thanks in advance :)
Code I have tried that does not work:
HTML
<button ng-click="changeStatus" ng-show="checkStatus">Play</button>
<button ng-click="changeStatusAgain" ng-hide="checkStatus">Pause</button>
Controller:
$scope.changeStatus=function(){
$scope.checkStatus = false;
}
$scope.changeStatusAgain=function(){
$scope.checkStatus = true;
}
https://jsfiddle.net/n8nnwtte/
Use the same expression for both and negate it according to your logic.
HTML
<button class="play" ng-show="!song.playing" ng-click="song.togglePlay()">
<button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">
JS
var $scope.song = {
playing: false, // Set the initial state
togglePlay: function() {
$scope.song.playing = !$scope.song.playing; // This would alternate the state each time
// Do something with the song
if ($scope.song.playing) { /*..*/ } else { /*..*/ }
}
};
This assumes you have a song object defined in your scope and that it has a boolean property called playing. So if song.playing is falsy we show the play button and if it's truthy we show the pause button.
The togglePlay() method defined can then be used to alternate the state of song.playing in addition to its role of actually controlling the playback.
JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element
his post shows how to toggle (play/pause) sound by JavaScript manipulation of onclick event of a DOM element. Browser support of HTML5 audio tag is a must in this example.
https://siongui.github.io/code/javascript-sound/toggle.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element</title>
</head>
<body>
<button id="player" type="button"
onclick="javascript:toggleSound();">
Click to Toggle Sound
</button>
<audio id="audio">
<source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>
<script type="text/javascript">
function toggleSound() {
var audioElem = document.getElementById('audio');
if (audioElem.paused)
audioElem.play();
else
audioElem.pause();
}
</script>
</body>
</html>
How to enable double click event to fotorama slider to make full screen, like what we are seeing on right top corner
You can use this jquery events http://api.jquery.com/dblclick/ to execute this function
fotorama.requestFullScreen()
remember you should initialize fotorama manually in the header of the api you can see how do it.
Here is a example for you !
http://jsfiddle.net/meickol/8dv7k/ how you see is easy! good luck!
HTML
<base href="http://fotorama.s3.amazonaws.com/i/okonechnikov/">
<!-- Fotorama -->
<div class="fotorama_custom" data-width="700" data-ratio="700/467" data-max-width="100%">
<img src="1-lo.jpg">
<img src="2-lo.jpg">
<img src="9-lo.jpg">
<img src="6-lo.jpg">
<img src="5-lo.jpg">
</div>
SCRIPT
<script>
// 1. Initialize fotorama manually.
var $fotoramaDiv = jQuery('.fotorama_custom').fotorama({
click:false,
allowfullscreen:true,
});
// 2. Get the API object.
var fotorama = $fotoramaDiv.data('fotorama');
jQuery('.fotorama').dblclick(function(){
fotorama.requestFullScreen();
});
</script>
this should be simple...could someone provide me a simple code sample that has an aspx page hosting both a silverlight app (consisting of, say a button) and an iframe (pointing to, say stackoverflow.com). The silverlight app and iframe could be in separate div's, the same div, whatever.
Everything I've tried so far leaves me with a page that has no silverlight control rendered on it.
EDIT: At the request for what my xaml looks like (Plus I should point out that my controls render just fine if I comment out the iframe.)
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="Pink">
<Button Content="Click Me!"/>
</Grid>
</UserControl>
Thats it. Just for good measure here is my aspx page...
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div style="height:100%;">
<asp:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"/>
</form>
Hmm, sound a bit odd, a quick google gave me this top result which talks about using an Iframe and Silverlight on the same page, without problems.
Also a quick test with the following code:
<%# Page Language="C#" AutoEventWireup="true" %>
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!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" style="height:100%;">
<head runat="server">
<title>Test Page</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Test.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"></iframe>
</form>
</body>
</html>
Renders out both Silverlight and the Iframe quite happily.
What code were you using when trying and it didn't work?
What does your XAML look like?
It could be something along the lines of the size set on the usercontrol in XAML, doesn't match the size set on the plugin on the aspx page. In that case, your button might be there but just not in the viewable area... Try checking the size of things, make sure they match.
A quick test you could do is to change the background color of your root element in the XAML and see if anything happen on the page.
Also, does the silverlight work if you remove the Iframe but leave everything else as is?
Sorry if this a too simple suggestion but without knowing your experience level with XAML...
Funny enough, I just solved this issue by ensuring that I specify the iframe dimensions by pixel.