方法一:Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as <article>
, is to use the HTML5 shiv, I’ve quickly put together a mini script that enables all the new elements.
Usage & Download
Download html5shiv.js and must be inserted in the head
element (this is because IE needs to know about the element before it comes to render them – so it can’t sit in the footer of the page, i.e. below the elements in question).
I’ve updated this post to link to Alexander Farkas’s version of the shiv – it’s the very latest and my simple one line script. The one I originally released was (I thought) beautifully small, but didn’t support print styles nor dynamic injection of HTML5 elements. Good thing there are smarter folk than I!
<!--[if IE]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bc.js"></script>
<![endif]-->
根据以上的方法可以实现HTML5 的标签在MSIE的各种浏览器中正常显示
方法二
JQuery1.7后的版本已兼容HTML5标签的实现
方法三
<video>js
Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video, today. This is also known as an "HTML5 Video Player". Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video.
What's an HTML5 Video Player?
An HTML5 Video Player is a JavaScript library that builds a custom set of controls over top of the HTML5 video element to provide a consistent look between HTML5 browsers. Video.js builds on this by fixing many cross browser bugs or inconsistencies, adding new features that haven't been implemented by all browsers (like fullscreen and subtitles), as well as providing one consistent JavaScript API for both HTML5, Flash, and other playback technologies
HTML5 Video Compatibility
For Browsers & devices that don't support HTML5, Video.js provides a lightweight flash player.
In the <head>:
The javascript must be in the for older IEs to accept the HTML5 tags. If you already have an HTML5 shiv for video you can put it anywhere.
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
In the <body>:
Use the HTML5 Video Tag as normal, with added classes and a data-setup attribute. Also check out our Embed Builder.
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>
1<audio>js
下载 http://kolber.github.com/audiojs/
2 添加到页面演示的文件夹audio.js, player-graphics.gif
& audiojs.swf
3 引入到页面
<script src="/audiojs/audio.min.js"></script>
4 像HTML5一样引入标签
<audio src="/mp3/juicy.mp3" preload="auto" />
A series of API tests & examples for using and extending audio.js
例子 2 Custom markup/css
例子3 Multiple players, testing preload
, loop
& autoplay
attributes
例子 4 Customised player
例子 5 Customised playlist player