I have a question. I know youtube has supported html5 for some time, so I just tried disabling the adobe flash plugin and took a look at the page source. I found no video tag. Could anybody explain that?
Using chrome, after disabling Flash, I do get a warning when trying to watch videos ("You need Flash!"), but it detects that I don't have flash, and uses the HTML5 version instead. If you use Chrome, you can look at the DOM with the developer tools (F12), and you'll indeed find a video tag in the video-container div, e.g.
<video class="video-stream" x-webkit-airplay="allow" src="http://o-o.preferred.twtelecom-dfw1.v15.lscache5.c.youtube.com/videoplayback?sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cexpire&fexp=900161&itag=43&ip=207.0.0.0&signature=55FCBF36A597656FECBEC8E78051B3BD30EE8D97.8F8D573710D767EAF4429FBC54C940DF7611A1BE&sver=3&ratebypass=yes&source=youtube&expire=1330650696&key=yt1&ipbits=8&cp=U0hSRVZQTl9OUENOMl9OSlJHOlBlcHJOMW9PSHhH&id=381980b5e867a1c5" data-youtube-id="OBmAtehnocU"></video>
For almost everything Google does on the web they use javascript. Most likely what is happening is that they test the browser to make sure it supports HTML5 video, they then load the the video dynamically using javascript.
To verify, use a web browser tool to inspect the current html as it's shown, not as it's sent to the browser.
And as Marius noted, be sure to have HTML5 enabled
Related
I'm debating whether or not to store a video on my server and call it through an HTML5 tag, or upload the video onto YouTube and use an iframe to embed the YouTube link. I'm not sure which would work more efficiently, or the differences between each one. What are the differences between using a HTML5 video tag and using a YouTube link and iframe tag?
Using a self-hosted video with HTML5
Advantages:
Full Control over markup and interface
Disadvantages:
Browser support is in your hands
Video download will be slower on your server as compared to YouTube
Recommended Usage:
Use a javascript plugin like https://plyr.io/ which will help with cross-browser and responsive concerns. Serve the video from a CDN if possible
Youtube Hosted
Advantages:
Performant
Browser support is everything
Disadvantages:
YouTube branded by default
Little control over the interface
Recommended Usage:
Use iframe embed code provided by youtube. For responsive assistance, see http://embedresponsively.com/. Also plyr.io allows you to play YouTube videos.
For my experience with <iframe> and <video> tags:
I found an issue with the <iframe> tag when you want to do an autoplay for your video while using a mobile or tablet device with "Chrome" & "Apple".
In my case, I used to do a click function to play video, that's what is impossible with <iframe> tag, so I use the <video> tag to resolve the issue.
I am trying to figure out if it is possible to stream smooth streaming video on browser using HTML5? After several trial on IE, Chrome and Firefox, it is still without success. It seems like smooth streaming only works with SilverLight client or some smoothstreaming application.
Below is the video tag I use:
<video controls="controls"
src="http://smoothhd.code-shop.com/video/oceans.ssm/Manifest"
poster="poster.jpg"></video>
Does anyone know if I have done anything incorrect or it is just not possible to play it with HTML5?
It is not currently playable in a browser. It is playable within an HTML5 Metro app.
Read for how to do it in a Metro app: http://blogs.iis.net/cenkd/archive/2012/03/28/How-to-build-your-first-html5-metro-style-smooth-streaming-player.aspx
You can embed a Silverlight player, which will play that link (if the server has proper crossdomain.xml file).
It's not an equivalent solution of course, but anyway smth that might give you what you're looking for.
Is there any way via extension / hack / or otherwise to play an m3u8 video from google chrome? I'm having some trouble getting the official word on m3u8 support, though I'm pretty sure its unsupported.
I'm working on a video player with live playback (using flash for standard browser apps) so I'm using m3u8's to get everything working on mobile, but the debugging tools on mobile leave a lot to be desired. I was wondering if there was any workaround to getting these videos to work so I could use the browser debuggers. (I'm on windows 7).
There's a new appendBytes/sourceBuffer proposal in the spec, and I saw a chrome evangelist mention that there was a beta implementation in chrome canary. With that you would have to write a ton of javascript to read the m3u8 file, get the video segments, parse the data, and push them into the media element manually. I'm guessing that's more than you want to do for testing.
What you probably want is something like Weinre.
I am working on a project related to vintage web designs. I would like to embed and autoplay a midi file but:
It doesen't work on IOS (I tried with my ipad)
On Firefox, sometimes the tune is not played, I don't know why.
Does the midi player depends on the browser or a plugin?
Can I find a univeral alternative to play my tune?
I am using the <embed> tag this way:
<embed src="tune.mid" hidden="true" autostart="true" autoplay="true">
I've referenced this question before and fell upon the answer of using the library midijs.
However, since that lib now has a bitcoin miner included, I've made a variant without the mining code:
https://kitchwww.github.io/midi/midi.js
It can be included and used in exactly the same way:
<script type='text/javascript' src='https://kitchwww.github.io/midi/midi.js'></script>
<a href="#" onClick="function(){
MIDIjs.initAll();
MIDIjs.play('path/to/yoursong.midi');}">Play My Song</a>
EDIT: updated to include an init function to be called on a User Gesture, as all audio must now be initiated from one.
Yes, the embed tag is reserved for plugins, which Mobile Safari doesn't support.
Take a look at HTML5 audio tag, which is supported by most browsers.
But please don't play music on a webpage... it's annoying - most either listens to music, have the speakers turned off, or are at the office.
Your HTML is OK. The problem is that some lower class browsers have lost the ability to play midi files. They have to install an add on. Real Player used to be a good solution, but now they are pushing a cloud subscription. There are plenty of other midi players around, but the users have to install one.
Browsers dropped support for playing MIDI files natively over time. You might want to try MIDI.js, a JavaScript based cross browser library.
Add the MIDI.js script to your webpage:
<script type='text/javascript' src='http://www.midijs.net/lib/midi.js'></script>
And then add a link to start playing:
Play My Song
Take a look at http://www.midijs.net for details.
For mid, and kar files, I suggest using vanBasco midi player as your default player. See the source on http://midkar.com/blues/blues_01.html
To Embed;
embed src="musicfile.mid" width=144 height=60 autostart=true repeat=false loop=false
(replace the "musicfile.mid" with the name of your midi file)
Use the HTML5 Audio tag. But like The guy before me said.... please reconsider music on your page.
<audio src="example.midi" preload="auto" autoplay="autoplay"></audio>
Well, here it is Aug 13, 2017 and don't you know embedding a bg midi on a web page is still a mystery.
In fact I'm pretty certain it can't even be done anymore (except IE's bgsound src, which still works fine for me).
But as for Firefox and Chrome, the solution provided by jofeu is a great work-around.
I only wish there was a way to embed so the midi just starts playing on page load, without having to click anything. I guess those days are gone.
I'm trying to write a simple audio player for a website, and am using the EMBED... tag to embed the audio and setting HIDDEN="true" and using various javascript commands to control the audio playback. It works fine for realplayer and mplayer but the quicktime plugin doesn't respond to javascript if the hidden bit is set - is there any workaround for this?
First, i suggest you to use the object html tag which is standardized, embed is not.
Then you could simply hide your embeded audio using CSS instead of this hidden param.
Even better, you should hide it using CSS through JavaScript, because if you do it this way, people who don't have JavaScript enabled but support CSS are able use the plugin player directly.
I found that setting height=0 width=0 worked the same as hidden=true and solved the problem
Actually, the Quicktime plugin requires that at least a 12px squared area be shown, otherwise it will not load, and the JavaScript API will not be exposed. The area detection is done at short intervals, and if the visible area is ever reduced, the playback is stopped immediately. The plugin is extremely good at determining if it can actually be seen, you can't event cover it with other elements.