MIDI format in HTML5 [duplicate] - javascript

Now playing midi in html is supported with javascript and windows media player/quicktime browser plugins.
I'm wondering if there are any news about html5 is going to support playing midi with audio tag in the future ?

If you want to play midi files, you can see how they did it here:
http://mudcu.be/midi-js/.
The example page makes use of MIDI.js. Note that it even uses soundfonts, all via scripting. Pretty neat.
If you're more interested in controlling midi devices, or having midi devices control your HTML5 page: the W3C guys are working on that. See the draft api description here

With html-midi-player, it is possible to embed a MIDI file in a website simply by inserting a midi-player element (a custom HTML element which works a lot like the audio element, but for MIDI files):
<midi-player src="jazz.mid" sound-font></midi-player>
Complete demo:
<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player#2b12128/jazz.mid" sound-font>
</midi-player>
<!-- The following needs to be inserted somewhere on the page for the player(s) to work. -->
<script src="https://cdn.jsdelivr.net/combine/npm/tone#14.7.58,npm/#magenta/music#1.22.1/es6/core.js,npm/focus-visible#5,npm/html-midi-player#1.4.0"></script>
Full disclosure: I'm the author of html-midi-player.

Related

Play dual audio MKV/AVI video with HTML5

From what I searched for, Chrome has the codecs to play MKV videos.
But, so far, I haven't found anything that allows, using Javascript / HTML5, to select the audio tracks available in the MKV and AVI files.
Can anyone give me a light on how to do this?
My idea was to create a web player to play this type of file, with the possibility to select the audio track and display subtitles.
The audioTracks property allows you to do this. However, as stated in the documentation here https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks
From version 37: this feature is behind the enable-experimental-web-platform-features >preferences (needs to be set to enabled). To change preferences in Chrome, visit >chrome://flags.
I've tried this and it works at least for video elements that have an mkv file as a source.

HTML Video control with rich APIs

I need to have a video control in HTML with rich and comprehensive APIs. I need some features like playing and pausing and navigating through a video "Go to specific hour/minute".
Also I look forward extra features like search and pairing with TVs.
I know there are some Jquery plugins and HTML5 video tag.
Any recommendations please?
I found a video control videojs that comes with plugins similar to what I need VideoJs

setting Ooyala videos to be HTML 5 by default

I want to set up v3 of Ooayla's api and use html 5 videos. So far I've followed the instructions here and I've added to the players js script to include the parameters to force html video. The video won't show on chrome for android 4.4 and on desktop it reverts to flash. If I say html only then it doesn't show up at all on either devices.
Here's my header code
<script src='https://player.ooyala.com/v3/MWI3YjYwYTBiZjg1ZWE0ZTYyZWViM2Ew?platform=html5-priority'></script>
My javascript code
//topVideo.field_ooyala_upload is the variable for the video id.
OO.ready(function() {
window.player = OO.Player.create(
'playerwrapper',
topVideo.field_ooyala_upload, {
// add the embedded player parameters here
autoplay: false
}
);
});
Not sure why I can't get HTML5 videos to show up. Any help would be great.
To stream using HTML5 V3 Player you have to add the ULR query param as you have done correctly.
Note that this will stream using progressive download on both desktop and Android and as such this encoding must be enabled in your account.
If you want to try HLS streaming, and have that encoding enabled, for Android you have to enable an additional query string parameter described here.
If you have a more complete sample of your code, please share it for further comments.

Document Previews in Browser

Is there some way to preview documents in browser? Specifically in say an iframe within a page, as opposed to opening the doc in a new tab? I have a list of files of any type and when a user clicks on one, want to open it in a readonly format. If that file is a video or audio file, that's easy enough, but I'd like to be able to also do pdfs, word docs, maybe excel. Preferably it would be in a cross browser friendly way but if I need to do detection for a plugin (I've seen Google Docs Viewer for FF) I can live with that.
UPDATE:
ShaneC's answer is great and will work well in general. The one hitch I see is that for html5 devices (think ipad), I need to convert the document into a series of images. Is there any way for me to do this in an automated fashion? I need to be able to do this automatically when a new document is uploaded.
You'll want to integrate a cross-browser cross-type document viewer. Google will give you some good sites, personally I've had good experiences with Flex Paper.
For demos, see here: http://flexpaper.devaldi.com/demo/
There is another approach that can be used to view images/pdf/xlsx/docx etc.
You can use iframe and google's gview in the following way:
const YOUR_URL = https://calibre-ebook.com/downloads/demos/demo.docx;
<iframe
className="doc"
src={`https://docs.google.com/gview?url=${YOUR_URL}&embedded=true`}
/>
There is the Javascript ViewerJs. An open source tool which allows a website to display PDF and open standard for office documents. It will display the documents inline and without browser plugins.

Is there any way to control EMBED Code Videos?

Is there any way to control YouTube EMBED CODE. For example I am using YouTube embed code in my site. Is there any way to control the video like forward, backward, stop etc. with my own buttons.
Is this possible?
Any help will be appreciated.. Thanks in Advance.
Fero
YouTube has a JavaScript and Flash API that you can use to build your own player or control the player programmatically.
The documentation is here: http://code.google.com/apis/youtube/overview.html
There are several examples in the documentation for controlling your own "chromeless" player. This is probably what you want to use if you want your own buttons.
All of the major browser-embedded video player types have ways to do this, but the method is different for all of them.
YouTube uses a Flash player, which poses a special problem: Flash video players have no ability to handle external JavaScript calls other than what is specifically added by the programmer that built the player. That is, if YouTube didn't build their player with support for external scriptability, you can't script it. This isn't a flag -- on/off -- it's that Flash makes you explicitly publish an external scripting API, and you have to know what the calls look like to make the player do what you want. This is unlike, say, QuickTime, Windows Media Player, or the new HTML 5 <video> tag, all of which have documented basic playback control like you're asking about.
It's probably possible to build your own FLV player (or buy one, like the popular JW Player, which does have a JavaScript API) and point it at the actual video file served by YouTube. I don't know if they try to obscure the video file URL, but once you find out what it is, you're golden.

Categories

Resources