I want to play an audio file from server. currently i am using html audio control, but its very slow. my requirement is to play as fast as possible, almost instantaneously. what would be the best way to achieve this? reference to source would be appreciated. Thanks in advance.
The HTML5 way is here.
<audio controls>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
type='audio/mp4'>
<!-- The next two lines are only executed if the browser doesn't support MP4 files -->
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
type='audio/ogg; codecs=vorbis'>
<!-- The next line will only be executed if the browser doesn't support the <audio> tag-->
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
You can also make use of javascript to get this done.
var aud = document.createElement("iframe");
aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); // replace with actual file path
aud.setAttribute('width', '1px');
aud.setAttribute('height', '1px');
aud.setAttribute('scrolling', 'no');
aud.style.border = "0px";
document.body.appendChild(aud);
Related
How can I show a HTML+CSS file in a Flutter widget, while being able to manipulate the HTML or CSS (in file) and viewing the changes live?
Manipulating HTML:
I could use JavaScript to manipulate the HTML DOM of a loaded webpage, probably through localhost? Is there a better way to do it instead?
Manipulating CSS:
Searching around the internet I find JavaScript like "dom.getElementById('something').style.color = color.red". Though, how could I go for loading css on every change of the css file, if possible?
I hope my question is not vague. Please let me know of any issues or suggestions on this question.
The app is meant for desktop installs, though I wouldn't mind switching to working with flutter-web if need be.
Kind regards.
I'm trying to implement streaming with JWPlayer using the following URL: rtmp://stream.technolutions.com/vod/mp4:0447d67935584a81986a0311443a7d9c.mp4.
I'm putting this RTMP URL in the following:
<script type="text/javascript">
jwplayer("modal-videoplayer-container-1").setup({
file: "rtmp://stream.technolutions.com/vod/mp4:0447d67935584a81986a0311443a7d9c.mp4",
image: "http://placehold.it/739x554/0000cc/&text=700x450",
width: 700,
height: 450
});
</script>
I understand there's a different between Application and Stream but testing this URL inside VLC as a remote video works just fine. Any ideas?
If you are having similar problems it is possible that your SWF file could be corrupted (due to being moved/copied in an automated workflow such as Grunt or Gulp). Some aspects of JWPlayer may work but when you use a feature that's solely flash based (such as JWPlayer streaming) it will just show a blank black box where you expect your video to play.
Try including JWPlayer's cloud-hosted JS file instead of hosting it yourself to see if it solves it. Special thanks to Ethan and Cooper at JWPlayer for helping me out with this.
I am thinking of having a HTML page which references no CSS or .js files outside of itself so that it can work offline. Would this work?
You should use HTML5 Application Cache.
Consider starting from this tutorial: http://www.html5rocks.com/en/tutorials/appcache/beginner/
Yes this will work. You can put all HTML pages and CSS or JS files which HTML references to into your app.
Is there a lightweight, free, and reliable way to display MJPEG in a cross-browser environment? I'm trying to display an MJPEG stream from an Axis 2120 IP camera on a site that I'm developing, and I've found that this is quite reliable in current versions of Firefox. However, after some testing I've found that IE, Opera and Chrome all have varying degrees of trouble doing this (no Mac access, so I'm not sure about Safari). Internet Explorer has no support for MJPEG and doesn't work at all. Opera takes literally 10-15 seconds to display anything after the initial GET was sent. Chrome works perfectly until the <div> that contains the <img> tag is hidden and then shown again.
For reference, I'm using an <img> tag to display the stream like so:
<img src="http://my.ip.addr/axis-cgi/mjpg/video.cgi/?resolution=352x240" alt="real-time video feed" />
I've considered using a re-broadcasting server to collect the MJPEG stream and transcode it on-the-fly, but this solution seems too ugly. Are there any better suggestions out there?
I've just came out with a solution a couple of months ago. It's cross-platform, and doesn't need third-party plugins such as Flash or Java.
Basically, it's a node.js proxy which parses m-jpeg boundaries and delivers images in a defined interval.
Fork it at https://github.com/rodowi/Paparazzo.js
Here is a Java applet based solution that you can use for any browser (or just the ones that don't support MJPEG): http://www.charliemouse.com/code/cambozola/
As far as other bugs go with MJPEG, I have found that you should set the 'src' attribute of the 'img' tag to something besides the MJPEG before you try to remove 'img' tag. Example:
<img src="#" />
If you don't do that, Firefox will continue to download MJPEG stream even though it shouldn't.
I'm embedding some Word documents into our web page using iframe like this:
<iframe src="ftp://ftp.example.com/www/uploads/Image/test.doc" width="100%" height="400">
Alternative
</iframe>
The problem is that the embedded Word control allows the user to edit the documents and shows an icon to save them, but doesn't actually save anything. Is it possible to setup Word to save edits back to the FTP server? If not, is there someway we can make the document read-only so the user doesn't get the idea that they can make changes? We're using IE7 and Word 2003.
(I just asked a related question about getting Word to save to a FTP server: Possible for Word to edit documents directly off an web server without Sharepoint?)
You can use ActiveX component like EDraw OfficeView or UltraOffice to embbed office and give you few control against the save and edit the document. You can also send it back to server for save.
There are a number of solutions to your problem, the easiest in my oppinion is a commercial app: https://crocodoc.com/. Developers have unlimited preview time but production use requires a license, don't know if thats an option in your case? To get this working in IE7 you will also need http://html5boilerplate.com/ together with http://code.google.com/p/html5shiv/.
Not sure if this solution will remain free but it is at the moment: https://cloudconvert.org/page/api. They provide an api to convert documents to html, you could write a script to convert docs to html on upload and then store html to show on site.
Another good option is http://www.phpdocx.com/ they have a conversion plugin to convert docx to HTML, pdf and such.
As for making your existing solution read only, i read somewhere you can do it with the method below but i am unable to test as i am on a mac and currently have no access to a machine with IE right now.
<object id="msword" width="100%" height="100%" classid="clsid:67F2A879-82D5-4A6D-8CC5-FFB3C114B69D" data='[insert document name].doc'>
<PARAM NAME="src" VALUE="file:////[insert full document path here].doc" >
<PARAM NAME="readonly" value=true>
</object>
Hope these suggestions help you with your project!
I would recommend converting the file to an mht file. this will provide cleaner lines when shown in the browser and prevent the user from editing or saving the file.