I have a self-refreshing, hidden iframe included in every page on my website. Each time it refreshes, it checks a database for any new alerts (the website is coded with classic ASP). If the iframe loads and finds a new alert, it will have an embed tag that plays an mp3 notification sound.
My problem is that when the iframe loads with the embed tag, the cursor will lose focus on any text field if the user was typing at the time.
This doesn't appear to be an issue in Safari, FireFox, or Chrome... Only IE, and I'm running IE 9. This is the first time I've dared to add audio to this website... If I can at least have this working with the most recent versions of all the mentioned browsers, I'd be happy.
Here's my embed tag:
<embed hidden="true" autoplay="true" src="/AllInclude/Sounds/Notification_1.mp3" height="0px" style="overflow:hidden"></embed>
Here's my code which includes the iframe:
<iframe src="/AllInclude/AlertChecker.asp" style="overflow:hidden;height:0px;position:absolute;top:-1000px" frameborder="no"></iframe>
Here's what my iframe uses to refresh itself:
<script type="text/javascript">
setTimeout ('ReloadPage()', 15000 );
function ReloadPage() {
window.location = window.location;
}
</script>
Thanks!
Update:
I was able to get a working version of the html5 audio tag in place of the embed tag... However, since the audio tag is html5, I would need to add the "DOCTYPE html" tag in every page for this to work on IE. This tag causes huge compatibility issues for my old ASP website... so unfortunately, html5 is not an option.
You could use:
An iframe instead of an audio or embed tag
<iframe id="iframe" src="blank.html" disable="disabled" style="position:absolute;top:-10px;></iframe>
<!--You will need to save a blank html file as blank.html"/-->
<script type="text/javascript'>
/*
add the condition for audio to load
*/
document.getElementById("iframe").src="AllInclude/Sounds/Notification_1.mp3"
</script>
I would suggest however combining it with other options, listed above though...
Alright, well, after finding no good solutions to this issue, I decided to give Adobe Flash a chance, and it seems to be the best option right now. It's not pretty and not the way I'd like to make this work, but it works (and most people have flash installed).
Anyways, here's where I found a free flash audio player that has the capability of starting automatically:
http://wpaudioplayer.com/standalone/
And here's what my code looks like (it only implements the flash player for IE since the embed tag works just fine on other browsers):
<%
BrowserType = lcase(Request.ServerVariables("HTTP_USER_AGENT"))
if onload <> "" AND InStr(BrowserType,"msie") > 0 then
%>
<script type="text/javascript" src="/AllInclude/JS/audio-player.js"></script>
<script type="text/javascript">AudioPlayer.setup("/AllInclude/Flash/player.swf", {width: 290, autostart: "yes"});</script>
<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">AudioPlayer.embed("audioplayer_1", {soundFile: "/AllInclude/Sounds/Notification_1.mp3"});</script>
<% elseif onload <> "" then %>
<embed hidden="true" autoplay="true" src="/AllInclude/Sounds/Notification_1.mp3" height="0px" style="overflow:hidden;"></embed>
<% end if %>
Related
I have a rails app that contains an audio tag on one page. I have a check that if a boolean is set then the audio will autoplay on page load. This works as expected, but when I navigate to ANY other page on the site (even ones without audio tags) the same audio autoplays from the beginning.
If I remove the autoplay option, the problem goes away, but I would like to keep this feature to autoplay if the boolean is true. Also this problem only happens when navigating to different pages on the same site. If I go to a different website, the audio stops.
Here is the code for the audio tag:
<audio src="<%= audio_path mp3_link%>"
type="audio/mpeg"
id=<%= "#{title_id}" %>
onplay=javascriptFunction()
controls <% if play_audio_on_load %> autoplay <% end %> >
EDIT:
After some experimentation, I realize this problem persists whenever autoplay is enabled, not just when it is triggered by a boolean. I am much more interested in WHERE the audio is actually coming from than how to solve my particular problem. It just doesn't make sense to me because the newly loaded pages don't contain any audio tags and yet the audio plays.
UPDATE / SOLUTION:
I realize that my problem came from trying to do something unnecessary in the first place. What I was trying to do was update my database and then reload the page and play the audio from where it left off. What I didn't realize I could do was just update the database without reloading the page. This keeps my audio playing and doesn't create the problem from before.
I still don't know what could have possibly caused the audio to keep playing, so if anyone knows the reason / solution please post it here in case someone else has this problem in the future. Thanks!
I had the same problem and the reason was turbo-links. Turbolinks interfere with the browsers viewpoint of a page.
See https://github.com/turbolinks/turbolinks :
"Turbolinks intercepts all clicks on links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.
During rendering, Turbolinks replaces the current <body> element outright and merges the contents of the <head> element. The JavaScript window and document objects, and the HTML <html> element, persist from one rendering to the next."
This seem to interfere with the autoplay attribute of the <audio> tag, which is still active.
One fix is to disable all turbolinks reachable from the specific page, i.e. inside all related partials, so that a true reload of the linked page is done.
Example:
<%= link_to "Home", root_path, 'data-turbolinks':false %>
Another possibility is to make turbo-links reload specific pages, by incorporating the following into the header of that page:
<head>
...
<meta name="turbolinks-visit-control" content="reload">
</head>
window.onbeforeunload = function() {
$.each($('video, audio'), function(i,e){ e.pause() })
}
I've recently started programming within the Tizen environment and SDK, and I am trying to create a (Samsung)smart-tv application which takes mp4-media links and display those links in form of a video-player, the problem is that whenever I use the html5 video tag, the application takes ages (2-4 minutes) to load, and a lot of the time it doesn't even load at all.
The code has been tested on JsFiddle and locally, and it works perfectly fine there, but whenever I try to execute the same code within the index.html in the Tizen project (which runs in a Samsung TV emulator) it exhibits the behavior I just explained (extremely slow/crashing).
Here are some examples of what I tried:
<html>
<head>
<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto'
width='640' height='264'
poster="download.jpg" data-setup='{}'>
<source src='sample.mp4' type='video/mp4'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.5.4/video.js'></script>
</body>
</html>
I have also tried without the use of video-js, I tried only using the video element, but the same result, it would sometimes work, sometimes not, and when it would work, it would take a long time before it actually loaded. According to the documentations, HTML5 is supported, and the use of the video tag is even "encouraged" by the guides they published. I have also tried generating the HTML with javascript and trying to make it work like that, but no luck.
It could be the video tag implementation of the emulator, codec, etc. I assume that you can't test the code on an actual Tizen TV device so I would suggest adding the event listeners first, and see what's happening, then try the AVPlay API, which I would recommend implementing in your apps.
<body>
<video id='video' width='700' height='400'
poster='yourPosterURI' src='yourVideoURI'
controls style='background:black'>
</video>
</body>
var videoElement = document.getElementById('video');
videoElement.addEventListener('loadeddata', function() {
console.log('Video loaded.');
});
videoElement.addEventListener('timeupdate', function() {
console.log('Current time: ' + videoElement.currentTime);
});
videoElement.addEventListener('seeked', function() {
console.log('Seek operation completed.');
videoElement.play();
});
videoElement.addEventListener('stalled', function() {
console.log('Video stalled.');
});
videoElement.addEventListener('ended', function() {
console.log('Video ended.');
});
I have developed a little system/series of videos (3 to be exact) in an iFrame. When the main index page is loaded, and after the user clicks the "play" button on the video (which is in that iFrame), that video plays, then it redirects to another video (in another .html file) that autoplays, and then when that is over, it redirects to another video that autoplays--then everything's done. Clunky, I know, but that's what needs to be done.
Here's my issue: I want the user to be able to fullscreen the first video (if they so desire) and retain that fullscreen "status" throughout the transition between videos.
For webkit browsers, fullscreen "mode" for the videos in that iFrame works. I'm using this snippet of code in my iFrame to do so:
allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
So fullscreen mode does work, it just won't retain that fullscreen status when the video switches to the next. That makes sense.
I'm looking for way to detect that the user is viewing the video fullscreen and then automatically set the next video in the series to fullscreen when it is loaded.
Below is what the markup for each "video page" (that goes in the iFrame) looks like. The only difference between on video2.html and video3.html is that they have autostart:true below the width attribute.
<html>
<head>
<script src="http://jwpsrv.com/library/5Tx9ZN23EeKCNxIxOQulpA.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="videobox">
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"video/open-title-final.mp4",
height:480,
width:640,
events:{
onComplete: function() {
window.location = "video2.html";
}
},
});
</script>
</div><!-- /videobox -->
</body>
</html>
So again, I'm looking for a way to detect that a user has activated fullscreen mode, so that the next video in the series can be automatically set to activate fullscreen mode at the start. Is this possible?
Thanks in advance.
Not sure why you can't just use a playlist to queue the video's up, but i'll just trust that you have your reason for this exact implementation method and just tel you that i believe you will find there is an ònfullscreen`callback in JWPlayer, along with other fullscreen related checking methods for you to use.
See here: http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference/ and look under the resize heading around halfway down the page (or just search for onfullscreen on that page)
The code provided below is present in an html file. When opening the file in Firefox there is a black box being shown instead of the video. Does this mean an addon, extension, or application needs updating or a setting in Firefox needs changing?
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
</body>
</html>
I made a mistake. This code actually worked, but I thought it didn't work a few times even though it did. I actually tried using a different Youtube video, and it wasn't working because I manually coded what src equaled incorrectly as opposed to just right-clicking the Youtube video and selecting "Copy embed html". So the problem had nothing to do with browsers, addons, plugins, extensions, or updates. I just had incorrect code for src.
Note: Use the "Copy embed html" feature as opposed to manually trying to enter in the code.
I'd like to display a Flickr badge as alternate content when a user doesn't have Silverlight installed to display my Flickr Silvrlight App. This works in Firefox, but not in IE:
<object width="100%" height="100%" type="application/x-silverlight-2" data="data:application/x-silverlight-2," id="SilverlightObject">
<param value="/ClientBin/FlickrSilverlightApp.xap" name="source"/>
<param value="2.0.31005.0" name="minruntimeversion"/>
<!-- Flickr Photos -->
<div id="flickrbadge">
<h3 class="subheading">Flickr Photos<a target="_blank" href="http://www.flickr.com/photos/tags/monkey/">View All</a></h3>
<script src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=all_tag&tag=monkey" type="text/javascript"></script>
</div>
</object>
The h3 tag content is being displayed, but the Flickr badge isn't. I looked at what the Flickr badge code does. It's nothing fancy, but it does document.write some content. Does IE not support document.write inside an tag? If not, how should I work around it?
Shouldn't it be <script src="..."></script>?
Maybe you should reverse the problem? Instead of having the Flickr badge inside of your object tag, you should replace the object tag with your Flickr badge src link if the user doesn't have Silverlight installed?
(using jQuery for brevity)
$(document).ready(function() {
if(!Silverlight.IsInstalled()) {
$("#SilverlightObject").replaceWith("<div id="flickrbadge"><h3 class="subheading">Flickr Photos<a target="_blank" href="http://www.flickr.com/photos/tags/monkey/">View All</a></h3><script src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=all_tag&tag=monkey" type="text/javascript"></script></div>");
})
Of course, rather than having the big long string, you could just put the Flickr badge div+content on the page with display:none set and then grab it from the DOM and insert it where you want it. The downside to that is that the script will download and execute even if you don't use it, causing extra requests to be made.
There are some details on document.write in scripts here. I realize that this particular script is outside of your control, but it might shed some light on why you see the difference in the behavior.
I tried the badge link you have on IE and it didn't generate proper fragment until I decoded the & to &.
There are some differences on how content is processed between HTML and XHTML. Check to see if your page is being delivered as XHTML to FF and as HTML to IE. Though, this affects only the content and should not have any effect on scripts using src attribute.
For IE, you might want to try the defer attribute. Though, it's IE-specific, and I don't know if other browsers will ignore it or barf on it.
Add a to cover the case where the user has JS disabled. I don't think that's your problem, but it's a good thing to add.