HTML5 enabling script In MSIE

方法一:

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

1 下载http://videojs.com/

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

例子 1 Test multiple load types

例子 2 Custom markup/css

例子3 Multiple players, testing preload, loop & autoplay attributes

例子 4 Customised player

例子 5 Customised playlist player


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值