I embedded a default media player into my webpage with the following html
<object height="20" width="200">
<embed src="url to music" autostart="false" loop="false" height="20" width="200">
</object>
Everytime I go to the website, this object automatically downloads the music. How can I disable the autodownload? I want it to load only when someone clicks on the play button.
I've been looking around today, and I see no way to instruct the browser to do exactly that.
The best way I can think of is instead of the <object ...>, you display an image which looks like the player, then you add an onclick property to the image, and you use javascript to replace the image with the real object. Something like :
<div><img src="player.png" onclick="this.parentNode.innerHTML = '<object height=\'20\' width=\'200\'> <embed src=\'url-to-music\' autostart=\'false\' loop=\'false\' height=\'20\' width=\'200\'> </object>'"></div>
I should add that you have to keep the <div> around the image (or put a <span>, or whatever tag you see fit) because the onclick action replaces parentNode.innerHTML, that is, the HTML contained in the parent, which in this case, is the image.
Related
I want to set up a rule using Dynamic Tag manager to monitor activity on some video on my website. I use HTML file to play videos as popup. Something like below.
<iframe width="620" height="349" src="https://www.youtube.com/embed/896dfsd996sdf?autoplay=1" frameborder="0" allowfullscreen></iframe>
I have already setup a rule in DTM using Event - "%complete" and "time complete" but it's not working.
Below is my html coding which calls a HTML file from an image click event
<a id="home-page-andy-graves-video-play" href="/portals/37/Video/yt-exec-Andy-Graves.html" class="vidpopup cboxElement hide-for-small-only">
<img alt="Home page carousal banner" src="/portals/37/Images/Home/c11-1.jpg">
Any idea what is missing? May be something wrong the HTML file?
Thank you in advance.
I am trying to 'theme' and position the pluging via css.
Here a piece of code:
<!-- vlc-player -->
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="660"
height="420"
id="vlc"
autoplay="yes"
allowfullscreen="yes"
windowless="yes"
mute="no"
loop="no"
toolbar="no"
bgcolor="#111111"
text="pirate-radio.eu"
branding="false"
target="lollipop.mp4">
</embed>
<!-- vlc-player end -->
Nothing fancy...
With this 'configuration' the player runs fine in FF and has a black background.
(Why, supposed to be #111?)
CSS attributes like 'opacity', 'z-index' and positioning via the "vlc"-id (I use in CSS as well) does what it should do.
However, in Chrome it shows a little bit different results.
First, the background of the player comes transparent, not black.
Second, the position of the player is shifted about 2-3px to the right (where I can life with but it be nice to know why too...)
If I evite CSS-rules both player-backgrounds come black.
Question is, is it the right way to use the forementioned id ("vlc") in CSS for reference?
If I wrap the embed-tag into a box (div) it isn't possible to target the player anymore.
How an I target the player properly to 'ccs it'?
I just messed up with another player I tested before and hadn't given me the results expected.
The correct implementation of a VLC-Player is (like published on several sites) for example as follows:
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="660"
height="370"
id="vlc"
autoplay="true"
allowfullscreen="false"
windowless="true"
mute="false"
loop="true"
toolbar="false"
bgcolor="#111111"
text=""
branding="false"
controls="false"
target="media/video/TESTCARD.mp4">
</embed>
So far so good?
Greets
Gee
ff.findElementByxpath(//object[# id='slPlugin2']).click();
is not recognizing the element.
And also suggest me the way to upload media through webdriver
<table class="imgTable photoTable" cellspacing="0">
<div id="fileUploadControl404" class="fileUpload t-toolbar t-grid-toolbar t-grid-top">
<object id="slPlugin2" width="117" height="32" data="data:application/x-silverlight," type="application/x-silverlight">
<param value="/LMM/ClientBin/FileUpload.xap" name="source">
<param value="Url =https://lmmwipqa.blob.core.windows.net/uploads?se=2013-12-28T07%3A18%3A43Z&sr=c&sp=w&sig=fxuPdwl4huKRISO%2BCPdZIQxh0i5cdnGjWKO8okj2O34%3D, Parent =fileUploadControl404, Caption =Add Photo" name="initParams">
</object>
</div>
//object[# id='slPlugin2']
The above parameter should be within double quotes,i.e., a string should be passed as parameter to findElementByXPath().
The required statement can be rewritten as follows :
ff.findElementByXPath("//object[#id='slPlugin2']").click();
With respect to clicking on invisible elements, the following statement can be used :
(Note : This assumes the page has jQuery on it)
((JavascriptExecutor)driver).executeScript("$('selector_of_element').click();");
For file upload you can refer this.
I think, ff.findElementById("slPlugin2") would be more shorter way to find the element,
but, anyway unfortunatelly, WebDriver will be not be able to handle the elements
inside the Silverlight embeded app.
I'd recomend to get the parent div: ff.findElementById("fileUploadControl404")
Get its coordinates with .getLocation();
Use Java Robot
or Sikuli in order to manipulate the embeded control.
I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zoom.
<embed src="filename.pdf?zoom=50" width="575" height="500">
does anyone know how to modify the code so its initial zoom is set to fit the object size.
Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.
Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:
filename.pdf#view=FitH
What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.
For a full list of available parameters see this doc
EDIT: (lazy mode on)
For me this worked(I wanted to zoom in since the container of my pdf was small):
<embed src="filename.pdf#page=1&zoom=300" width="575" height="500">
This method uses "object", it also has "embed". Either method works:
<div id="pdf">
<object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
<!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
</embed> -->
<p>System Error - This PDF cannot be displayed, please contact IT.</p>
</object>
</div>
just in case someone need it, in firefox for me it work like this
<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>
Followed #Rich answer, I used view=FitH in my code to view PDF content base64 in Angular as below.
I shared for whom concern about view base64 content PDF file with object tag using Angular framework.
The option for view PDF
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
Read PDF content from API as
let content = DataHelper.getDataFromAPI();
When click show content button use
showData() {
let content = DataHelper.getDataFromAPI();
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
}
In HTML file use object tag as
<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>
Link Angular demo https://stackblitz.com/edit/angular-ivy-tdmieb
Bit late response to this question, however I do have something to add that might be useful for others.
If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH
Use iframe tag do display pdf file with zoom fit
<iframe src="filename.pdf" width="" height="" border="0"></iframe>
This works fine for me
<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />
i've a code which let start a youtubevideo after clicking on a image.
The Problem is, that Opera, Chrome ect. start the video behind the image before clicking.
Firefox works fine.
Heres my code:
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer; margin-left: 89px;" src="./img/style/new/slider/XXXXXX.png" alt="" />
</div>
<div id="thevideo" style="display: none;">
<iframe width="604" height="266" src="//www.youtube.com/embed/XXXXXXXX?rel=0&autohide=2&showinfo=0&controls=0&modestbranding=0&wmode=transparent&showsearch=0&version=3&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
Can you help me for a better code?
Additional is it possible to show the Image again after the video ends?
Thanks in advance
EDIT: push
What if you paste the iframe code to #thevideo when the user clicks the image?
I think you can use the .append() function in jQuery to do it.
The chrome/opera...browser issue is a known issue. There are browser settings that you can change that will make it so that it does not auto play the video, since you are really just putting a mask over the video. See this article: Stop youtube autoplay
EDIT:
To handle it with a programmatic approach:
change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
See above:
EDIT: To handle it with a programmatic approach: change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
I used it and it works great!