I would like to know how I can directly embed an audio file that I have uploaded to OneDrive in HTML using the <audio> element.
I know there's always an Embed button in OneDrive, but I don't want that. That really only provides a big rectangle-shaped thing with a music icon and the filename, and when I click that, I'm still redirected to OneDrive. How can I really embed this using the HTML <audio> element?
I actually already tried the Copy Audio Location menu item from Firefox's context menu. It gave me a link that worked in the Dreamweaver's Live Preview (in the split view), but it didn't work in any other browser, including Firefox and Chrome.
I would like to use pure HTML to do this, i.e. no JavaScript.
Does anyone know how to do this? Thanks!
You can probably do it this way:
Get the direct link to the file:
how to do it:
Open OneDrive and Copy Embed Code
Paste the Embed Code and Modify:
Now paste the embed code you copied in a notepad or a text editor. This code looks like this one – <iframe src="https://onedrive.live.com/embed?cid=FA476CAFF1A7E75C&resid=FA476CAFF1A7E75C%21122&authkey=AN_axXpcOy7Zfl8" width="98" height="120" frameborder="0" scrolling="no"></iframe>. You have to modify this code, remove everything except source URL of the file https://onedrive.live.com/embed?cid=FA476CAFF1A7E75C&resid=FA476CAFF1A7E75C%21122&authkey=AN_axXpcOy7Zfl8 and then just replace embed with download to get direct/permanent link. After this modification, the link should look like this – https://onedrive.live.com/download?cid=FA476CAFF1A7E75C&resid=FA476CAFF1A7E75C%21122&authkey=AN_axXpcOy7Zfl8
That’s the OneDrive direct or native link
Use this link in the audio tag:
<audio src="https://onedrive.live.com/download?cid=FA476CAFF1A7E75C&resid=FA476CAFF1A7E75C%21122&authkey=AN_axXpcOy7Zfl8"></audio>
I mean provide into src the link you get from OneDrive.
On a project, i have an iframe and a link targeting it. The link leads to an mp3 file. However on google chrome, and maybe other browsers, the iframe appears with a horrible black background.
Is there any way to fix this?
All solutions i have found so far talk about changing the background in the source file, but this is not possible for me as it is an mp3 file not an html file.
You have zero control over the default presentation of an audio player when you link to it in this way. In fact, it's very common that the file will just be downloaded instead of played in a browser.
If you want to control it, you need to build an HTML page that loads the audio file.
I have an SWF on the header section of our site. It's embedded with Kimili Wordpress Plugin:
<div class="swfheader">
<?php echo do_shortcode('[kml_flashembed publishmethod="static" fversion="8.0.0" movie="http://xxx/uploads/2016/Assets/header.swf" width="1950" height="270" targetclass="flashmovie" play="true" loop="true" menu="false" quality="best" scale="noscale" allowfullscreen="false" allowscriptaccess="never" allownetworking="none"]'); ?>
</div>
Problem I'm having is auto play. In most browsers a "play" icon shows up for the swf to start and in other browsers everything works fine.
I used Adobe Animate CC to create it and publish settings under HTML Wrapper has only the loop option checked.
Is there any way to fix this issue? I'd like to have SWF auto play in all browsers if possible.
Your banner size is triggering the browsers assumption that it's some external advert banner (those need to be "click to play" in case of some noisy data hogging video advert that no-one asked for). To avoid it, the html & swf must be in same exact location:
Example :
mysite.com/post1/page.html and mysite.com/post1/banner.swf.
I don't know how you will meet that expectation via Wordpress since your posts .html file & your uploads folder content exist in two separate locations.
I have the code below which is a perfect solution to what I need, which would essentially be embedding any of JPG, GIF, PNG or PDF files in my webpages. It works perfectly in PC browsers, but a critical requirement for the pages is to have them compatible in mobile browsers due to its target users.
<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>
Although image files work fine, PDF files are opened separately in the mobile browser and not embedded inline in the web page. What would be an alternative solution or implementation to this?
You can use PDFJs library. Using just JS you can render pdf files.
Please , check here : https://mozilla.github.io/pdf.js/
One simple option is that the the object element provides a fallback, so you can do:
<object data='some.pdf'>
<p>Oops! Your browser doesn't support PDFs!</p>
<p>Download Instead</p>
</object>
Then, when the mobile browser can't get the item, it'll just show this and you'll be all set, kinda.
Here is my solution to this problem.
<object data="mypdf.pdf" type="application/pdf" frameborder="0" width="100%" height="600px" style="padding: 20px;">
<embed src="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing" width="100%" height="600px"/>
</object>
Explanation:
<object> tag has a feature that when it is unable to load item, it loads the content inside itself i.e tag.
Since object tag cannot load on mobile view, therefore on mobile devices, embed tag will become active.
Q) Why can't we directly use tag for all cases?
You can actually, but since the embed tag is loading file from
drive, it does not gives any user controls for the pdf that we see
with object tag (zoom, page no., etc.). So our code will give the user pdf view controls atleast in the desktop mode instead of not giving any controls at all.
Q) Direct drive links don't work....so why this solution?
In the above google drive URL, view is changed to preview.
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/view?usp=sharing
becomes,
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing
So, we can make direct drive links work with this little modification
Google Docs viewer offers a feature, that lets you embed PDF files and PowerPoint presentations on a web page.
<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:100%; height:650px;" frameborder="0"></iframe>
replace the URL(http://infolab.stanford.edu/pub/papers/google.pdf) with your own address, It's worked for me but it takes more time to load on
src:http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html?utm_source=pocket_mylist
The only way I have found, which allows you to embed pdf is using Google drive, then select the menu button once you have opened your file, and select get embed code, you can only use a Google drive or Google docs reference. And you must also turn public sharing on otherwise others won't be able to view it without permission.
Using Adobe PDF Embed API solved my problem.
Adobe PDF Embed API
I ran into the same issue. As a new developer, I wasn't aware that mobile browsers have issues embedding PDF files in iframes. I am now... lol
I racked my resources trying to get this to work when it dawned on me that mobile browsers do not have an issue displaying PNG files in a new window. So, in my infinite wisdom, I opened the PDF files in Gimp 2.0 then exported them as PNG files. And then I created buttons for the user to click and now it opens the graphic instead of trying to embed the PDF.
Looks like this:
<input class="AG" id="UnityBtn" type="button" value="Unity" onclick="location.href='../Meeting_Info/Unity.png'" />
I don't know if this is possible for you, but it worked beautifully for me.
Use an object tag with a iframe tag inside your object tags.
The object data can be a pdf or png file by changing the type and can use any link you want stored wherever, however the I frame is the one which will be loaded for mobiles which has to be a link from Google drive or Google docs you also need to allow the files to be shared public otherwise others won't be able to view them.
I would share the code but this site has some rubbish rules about code and won't let me share them so I'll leave you to Google how object and iframe tags work by viewing better sites that actually wants the help from developers.
Have fun guys!
I am using fancybox within a html page and I am calling an flv file via a swf file, plays fine locally and works via the web, the problem is that I need to link all of my assets with remote urls as I need to host the html elsewhere. So html hosted on server A and assets on server B. So my thoughts turn to adding the flash parameter to the query.fancybox-1.3.4.pack.js file and this is where I get stuck.
http://www.myofficeheadset.com/video.html
I've located the object tag in the query.fancybox-1.3.4.pack.js file I just need to add the allowScriptAccess parameter
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+e.width+'" height="'+e.height+'"><param name="movie" value="'+c+
'"></param>';P="";b.each(e.swf,function(x,H){C+='<param name="'+x+'" value="'+H+'"></param>';P+=" "+x+'="'+H+'"'});C+='<embed src="'+c+'" type="application/x-shockwave-flash" width="'+e.width+'" height="'+e.height+'"'+P+"></embed></object>
Any help would be much appreciated
Justin
Using the video player within Flash usually loads the movie content dynamically from another location or file. It seems like the flash is loading perfectly fine, but it can not find the movie to load. You should make the path to this movie inside the swf an absolute path, as the relative directory changes based on where the swf is loaded into.