I'm trying to place a flash video (object, swf) inside a div, and have that div draggable around the user's page. My code below works fine in everything except Chrome, where all the buttons in the player become un-clickable. (you can still hover over buttons for some reason and get feedback, like a mouseover in the flash player, but you can't click it)
This means that mute, pause, volume, fullscreen, etc are all broken in chrome. Clicking anywhere on the player just treats it like a drag click (any click anywhere on the player gives no feedback, but holding it and dragging will drag the div)
What I'm looking for is a click/draggable border around the div, with a functioning video player inside (like it works in IE and FF), that stays in its current position on the screen as the user scrolls up and down the page's contents.
I'm just running the following in my js:
$('#video').draggable();
and my relevant CSS is:
#video
{
position: fixed;
right: 0;
bottom: 0;
padding: 10px;
border-radius: 10px;
background-color: #0DD0FC;
display: block;
width: 640px;
cursor: pointer;
height: 360px;
}
and in my HTML I have
<div id="video" style="z-index: 4500;">
<object width="100%" height="100%">
<param name="movie" value="http://www.domain.com/value;autoplay=true" />
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<embed src="http://www.domain.com/value;autoplay=true" type="application/x-shockwave-flash"
allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%"
wmode="transparent"></embed></object>
</div>
You can specify which children should not activate draggable, but I can't vouch for how this works with Flash content I'm afraid.
Related
I am currently working on a chrome extention for youtube and I want to disable the option for the user to pause/play the video by clicking on it.
I saw some posts that say "video.off('click');" but it dosent work.
I tried this one also :
video.addEventListener('click', function(event){
console.log("preventing?")
event.preventDefault();
});
but still it doesn't do nothing.
I would love some help if possible - Thank you all in advance!
Edit:
I saw the comments and I want to sharpen my question. I need a solution to disabling just the click event to stop the play/pause from there.
I also need the answer to be written in a javascript file because I want to control whether or not the user can click on the video.
I've also looked in: Javascript code for disabling mouse click for youtube videos but I haven't managed to find a corrent solution to my spesific question. I saw one solution that recommend to add a transparent overlay on top of the video element but I have no idea how to do so and how to make it resize as the video player itself resizes
Attach a click listener on window + use the capture phase by specifying true for the third parameter of addEventListener + use stopPropagation, so that your listener will be the first target in the event propagation chain i.e. it'll run before the site's handlers because sites usually don't use the capture phase.
window.addEventListener('click', event => {
if (event.target.matches('video')) {
event.stopPropagation();
}
}, true);
Note that if some rare site uses the exact same trick, you can still override it by declaring your content script with "run_at": "document_start".
I noticed that some websites showing youtube videos put a transparent overlay on top of the player so that the users cannot click on the "Open in YouTube" icon. This might help you too, even if it might still be able to give focus to the controls using the keyboard.
You can check both the implementations here: https://stackblitz.com/edit/web-platform-4oehg4?file=index.html ( SO snippet can't embed yt iframe videos )
// HTML
<div class="container">
<iframe
id="video2"
width="100%"
height="100%"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
<div class="overlay"></div>
</div>
// CSS
.container {
position: relative;
width: 100%;
height: 50%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Using CSS Only:
// HTML
<iframe
width="100%"
height="50%"
id="video"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
// CSS
#video {
pointer-events: none;
}
I did search to see if there was already an answer and there are some related answers but the code is different. I'm honestly not sure if this is HTML or Javascript. I have no experience with web development.
So this is what is pasted to my WordPress website.
<iframe src="https:"some address" style="border:none; min-height: 700px; width: 1px; min-width: 100%; *width: 100%;" name="site" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%" referrerpolicy="unsafe-url" allowfullscreen></iframe>
scrolling
Try adding scrolling (scrolling="no") attribute to remove scrolling.
<iframe src="https://stackoverflow.com/" style="border:none; height:100vh; width: 100%;" name="site" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%" referrerpolicy="unsafe-url" scrolling="no" allowfullscreen></iframe>
as scrolling is deprecated I guess then we should go with CSS.
you can add this in your styleSheet or inside <style> tag in HTML page
iframe {
overflow-x:hidden;
overflow-Y:hidden;
}
I'm using Alfresco 4.2b
I've a issue. When using some browsers (chrome by now) the document preview shows collapsed (it have the document but it is at 38px height)
The div that contains the embed field has a height in "style" that is always in 38px (also if i try to change it in firebug, it returns to 38px)
<div id="template_x002e_web-preview_x002e_document-details_x0023_default-full-window-div" style="position: absolute; left: 10px; top: 226px; width: 824px; height: 38px;" class="web-preview real">
<embed type="application/x-shockwave-flash" src="/share/components/preview/WebPreviewer.swf" width="100%" height="100%" style="" id="WebPreviewer_template_x002e_web-preview_x002e_document-details_x0023_default" name="WebPreviewer_template_x002e_web-preview_x002e_document-details_x0023_default" quality="high" allowscriptaccess="sameDomain" allowfullscreen="true" wmode="transparent" flashvars="fileName=Minuta2.docx&paging=true&url=http%3A%2F%2Fintra.jaimeillanes.cl%2Fshare%2Fproxy%2Falfresco%2Fapi%2Fnode%2Fworkspace%2FSpacesStore%2F0a41947e-5054-4c6d-a861-caa7b0bb07e2%2Fcontent%2Fthumbnails%2Fwebpreview%3Fc%3Dforce%26lastModified%3Dwebpreview%253A1356554282043&jsCallback=Alfresco.util.ComponentManager.get('template_x002e_web-preview_x002e_document-details_x0023_default').plugin.onWebPreviewerEvent&jsLogger=Alfresco.util.ComponentManager.get('template_x002e_web-preview_x002e_document-details_x0023_default').plugin.onWebPreviewerLogging&i18n_actualSize=Tama%C3%B1o%20actual&i18n_fitPage=Adaptar%20a%20la%20p%C3%A1gina&i18n_fitWidth=Adaptar%20a%20lo%20ancho&i18n_fitHeight=Adaptar%20a%20lo%20alto&i18n_fullscreen=Pantalla%20completa&i18n_fullwindow=Maximizar&i18n_fullwindow_escape=Pulse%20la%20tecla%20Esc%20para%20salir%20del%20modo%20de%20pantalla%20completa&i18n_page=P%C3%A1gina&i18n_pageOf=de&show_fullscreen_button=true&show_fullwindow_button=true&disable_i18n_input_fix=false">
</div>
I've been searching but i can't find anything.
I think you need to search a bit 'deeper' in Alfresco.
Check the flash previewer freemarker template which is injected in the document-details template (xml). In that ftl or a reference to another one should be the div your referring to.
See https://issues.alfresco.com/jira/browse/ALF-16914, is that your issue?
You would be recommended to upgrade to the latest 4.2 version, where I believe it is fixed. Alternatively you could try removing the file tablet.css file which it seems triggers the problem (note this could have unintended side-effects, however!).
I've created a jQuery plug-in that allows a selected panel of a web page to be pinned to the top of the browser view-port when the user scrolls a long page after passing a particular horizontal point on the page.
When the panel is pinned or unpinned, a strange thing occurs: if a Flash SWF object is present as a descendant element of the container, the Flash object either restarts its animation or disappears completely.
The pin or unpin change occurs when the CSS property "position" switches between fixed, absolute and static. This forces Firefox to redraw its elements and it causes the <object> to reload and reanimate the Flash movie. I read this post with interest: http://alexw.me/2010/12/firefox-problems-with-javascript-animation/
Does anyone know of a workaround that prevents the <object> tag from reloading? I admit the Flash is an ad, but this problem only occurs in Firefox. Although there are suggestions that this may be a bug, I have searched without success and I'm scratching my pate with a deadline fast approaching.
Thanks in advance!
Peter
This is a known bug in firefox itself... Actually its been listed on their bugzilla reporting system since 2001 and still has not been fixed, and probably wont be fixed by the looks of it.
https://bugzilla.mozilla.org/show_bug.cgi?id=90268
The simplest workaround I've found is to add the css {overflow: hidden} to the parent of the swf object. That works in the two instances I've had this problem.
In one of our webapp we have two panels each one containing a flash animation. Only one of the panels is shown while the other is hidden. Initially we used jquery .hide() and .show() on the panels but with Chrome (21.0) everytime the visibilty of one panel changed from hidden to block the flash animation put inside restarted.
We tried different solutions suggested on the Net, but only one is working well: avoid changes to the display or the visibility css properties and hide the panels by changing the absolute position instead.
Something like this:
<div class="panelContainer">
<div id="panel1">
<object>...flash code here...</object>
</div>
<div id="panel2" class="active">
<object>...flash code here...</object>
</div>
</div>
.panelContainer {
position: relative;
}
.panelContainer > div {
position: absolute;
top: 0;
left: -3999px;
}
.panelContainer > div.active {
left: 0;
}
function showPanel(id) {
$('#panelContainer > div.active').removeClass('active');
$('#'+id).addClass('active');
}
showPanel('panel1');
Strange but true, we have this problem with Chrome only, while IE9 and FireFox 15 works with .hide() and .show().
I hope it helps.
I was looking for solution to support overflow: hidden; property in Firefox when embedded flash content in it. So I have different work around.
I have played with zIndex property on new-banner div in the code below, which avoids the problem discussed above in the question "the pin or unpin change occurs when the CSS property".
In my case I was using CSS property overflow:hidden; which I was toggling, causing an error in Firefox.
Check out the code below for a solution that worked for me:
<div class="footerbannerbox" style=" background-image:none; position:relative; top:-3px; width:690px; height:90px; margin:0 0 0 64px; padding:0;" id="footerBannerBox" onmouseover="handleFlash();">
<div id="new-banner" style="position: absolute; width: 690px; height: 300px; top:-213px; left:-1px;">
<div id="exp-banner" style=" position:absolute;clip: rect(0px 690px 300px 0px);">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" name="expandable" width="690" height="300" align="middle" id="expandable">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="/swf/Unbelievable_JK_RB_690x300.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#fff" />
<param name="menu" value="false" />
<embed src="/swf/Unbelievable_JK_RB_690x300.swf" width="690" height="300" align="middle" quality="high" wmode="transparent" bgcolor="#fff" name="expandable" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" menu="false" />
</object>
</div>
</div>
<script type="text/javascript">
function expand() {
document.getElementById("exp-banner").style.clip="rect(0px 690px 300px 0px)";
document.getElementById("new-banner").style.zIndex = '0';
}
function retract() {
document.getElementById("exp-banner").style.clip="rect(0px 690px 300px 0px)";
document.getElementById("new-banner").style.zIndex = '-1';
}
function handleFlash(){
document.getElementById("new-banner").style.zIndex = '0';
}
</script>
</div>
expand() and retract() functions are called internally from the SWF file.
My CMS system allows people to post some SWF's on my homepage however, sometimes there is a video which is included in the SWF (not two files like swf+flv). When the SWF video loads it uses up the bandwidth and so the page seems non-responsive for a while. Can I use jQuery to control all of the SWF's in a page that they load after the others are done; or maybe just load it after 3s?
Thanks!
Use AJAX to fetch the .swf and add to the page dynamically. or,
Place the html for .swf just before the </body> tag with style as display:none and using JavaScript, add it to the proper node.
$.ready(function(){
//move swf to proper place
});
Perhaps you should wrap your flash file in a div tag
<div id="image" align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="281" height="28">
<param name="movie" value="whatever.swf">
<param name="quality" value="high">
<embed src="contactb.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="281" height="28"></embed>
</object>
</div>
and use the following CSS code:
.image {
display: none;
}
then call at your last image declartion an onload event that will display the swf block
<img onload="document.getElementById('image').style.display = 'block'" src="whatever" />
Good luck!