低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频_ie8 播放音频-程序员宅基地

技术标签: html5+css+js  html5  video  audio  ie6  javascript  

支持低版本IE的html5播放器演示

通常人们习惯用swf播放器来播放网络视频音频

HTML5给我们带来了很多惊喜,其中新增加的audio和video标签可以让我们更方便的在网页中播放音频和视频。video标签虽好,然而目前它却无法在旧版的IE浏览器中使用。所以一般还是用flash播放器来播放视频,例如优酷网站的插入视频的代码如下:

<embed src="http://player.youku.com/player.php/sid/XNjgwMDU5MDU2/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

但是手上没有好的swf播放器怎么办?这个网站给出了一个还不错的插件:http://html5media.info/

html5media就是一个能让这两个标签在旧版IE浏览器中全面兼容的JavaScript类库。

html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架。使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式Flowplayer播放器。虽然,目前web播放器很多,但处理代码上并不简洁。

使用html5media让IE6/7/8浏览器支持HTML5的audio和video标签

1、首先在页面的head部分加入如下脚本

<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>

你可以通过使用IE条件注释的方法,只在旧版IE浏览器中加载这条JS脚本。

2、然后再使用audio或video添加音频视频就行了

<!-- 视频媒体标签 -->

<video src="uiej.com.mp4" width="800" height="600" controls preload></video>

<!-- 音频媒体标签 -->

<audio src="uiej.com.mp3" controls preload></audio>

这样你便可以在IE8,甚至老掉牙的IE6浏览器中使用audio和video标签了。

3、演示页面

像这类为不支持html5标签而出现的JS项目,会随着HTML5浏览器和HTML5的优势展现会越来越多起来。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/navysir8/article/details/45196751

智能推荐

【Git】Git中 tag 与 branch 的关系与使用_git tag和branch-程序员宅基地

文章浏览阅读1.9k次,点赞4次,收藏3次。标签是用于标记特定提交的静态引用。它是一个有意义的名称,用于表示项目的里程碑、版本发布或重要的提交。标签是不可变的,一旦创建就不会随着新的提交而移动。标签可以是轻量标签(lightweight tag),只是一个指向特定提交的引用也可以是注释标签(annotated tag),它包含了额外的信息(如标签的作者、日期、注释等)分支是代码开发过程中的不同线路或方向。每个分支都是从主分支(一般是master)派生出来的,开发者可以在分支上进行独立的工作,而不会影响主分支或其他分支。_git tag和branch

matlab进行fft变换,画出频谱图_matlab傅里叶变换后画频谱图-程序员宅基地

文章浏览阅读3.2w次,点赞19次,收藏133次。一、fft()函数matlab提供了快速傅里叶变换的函数fft(),fft函数能够进行指定点数的快速傅里叶变换。调用格式如下:resfft = fft(data1,1000); %resfft,fft 变换结果, data1--进行变换的数据,1000--指定1000点fft变换二、画出频谱图N = 1000; %点数n = 0:N-1; fs = 1000; %采样频率figureplot(n/N*fs,abs(resfft));..._matlab傅里叶变换后画频谱图

STM32输入上拉下拉 寄存器怎么设置实现_上拉输入怎么写-程序员宅基地

文章浏览阅读1w次,点赞5次,收藏13次。STM32输入上拉下拉 寄存器怎么设置实现在输出模式下:ODR是数据输出寄存器,但是在 输入模式下,同时也用来配置上拉下拉设置。在Alientek的源码中的按键输入实验中有如下一段初始化代码:void KEY_Init(void){ RCC->APB2ENR|=1 GPIOA->CRL&=0XFFFFFFF0;//PA0设置成输入_上拉输入怎么写

Oracle数据库中instr()与substr()函数详解_oracle instr substr-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏12次。instr()函数(俗称:字符查找函数)格式1:instr( string1, string2 ) 格式1解释 :instr(源字符串, 目标字符串)格式2:instr( string1, string2, start_position, nth_appearance) 格式2解释:instr(源字符串, 目标字符串, 起始位置, 匹配序号)实例格式1实例select instr('helloworld','l') from table--返回结果:3 默认第..._oracle instr substr

第五章 相似矩阵及二次型_相似矩阵及二次型总结-程序员宅基地

文章浏览阅读798次。线性代数同济版 第五章 相似矩阵及二次型 易错题和总结_相似矩阵及二次型总结

c# OpenCvSharp 检测(斑点检测、边缘检测、轮廓检测)(五)-程序员宅基地

文章浏览阅读4k次,点赞28次,收藏53次。在C#中使用OpenCV进行图像处理时,可以使用不同的算法和函数来实现斑点检测、边缘检测和轮廓检测。_c# opencv

随便推点

JAVA Hashset求集合的交集并集差集_hashset求交集-程序员宅基地

文章浏览阅读4k次,点赞13次,收藏40次。JAVA Hashset求集合的交集并集差集Hashset是Set接口较为常见的一个子类,该子类的最大特点是不允许保存重复的元素,并且所有的内容都采用散列(无序)的方式进行存储。package com.company;//集合的交集并集差集,首先建立三个集合,有两个集合从来输入保存数字,一个用来保存结果输出。import java.util.HashSet;import java.util.Scanner;import java.util.Set;public class Main ..._hashset求交集

6.2---将服务端端封装为class_如何将代码封装成类-程序员宅基地

文章浏览阅读92次。一、概述在前面的文章中,服务端的代码都是以面向过程的形式展现,本文将之前服务端的代码封装为一个class二、代码如下MessageHeader.hpp这个头文件包含所有的数据包的格式定义#ifndef _MessageHeader_hpp_#define _MessageHeader_hpp_ //消息的类型enum CMD{ CMD_LOGIN, //登录 CMD_LOGIN_RESULT, //登录结果 CMD_LOGOUT, //退出 CMD_如何将代码封装成类

SpringBoot_为什么java spring 要安装很多东西-程序员宅基地

文章浏览阅读950次。第一章 JavaConfig为什么要使用 Spring Boot因为Spring, SpringMVC 需要使用的大量的配置文件 (xml文件,还需要配置各种对象,把使用的对象放入到spring容器中才能使用对象,需要了解其他框架配置规则。SpringBoot 就相当于 不需要配置文件的Spring+SpringMVC。 常用的框架和第三方库都已经配置好了。拿来就可以使用了。SpringBoot开发效率高,使用方便多了1.1 JavaConfigJavaConfig: 使用java类作为x_为什么java spring 要安装很多东西

Go 开发关键技术指南 | 带着服务器编程金刚经走进 2020 年(内含超全知识大图)_so major version must be compatible-程序员宅基地

文章浏览阅读4.3k次,点赞2次,收藏4次。作者 |杨成立(忘篱) 阿里巴巴高级技术专家导读:从问题本身出发,不局限于 Go 语言,探讨服务器中常常遇到的问题,最后回到 Go 如何解决这些问题,为大家提供 Go 开发的关键技术指南。我们将以系列文章的形式推出《Go 开发的关键技术指南》,共有 4 篇文章,本文为第 3 篇。Go 开发指南InterfacesGo 在类型和接口上的思考是:Go 类型系统..._so major version must be compatible

关于Blender模型导入Unity的一些问题总结_blender导入unity-程序员宅基地

文章浏览阅读2.1w次,点赞26次,收藏180次。一、材质丢失Q:Blender的fbx格式文件导入Unity后材质球材质丢失 **啥呀**_blender导入unity

流式细胞术荧光染料PE-CY5,CY5.5-COOH的应用重庆新维创生物-程序员宅基地

文章浏览阅读240次,点赞5次,收藏3次。通过与特异性抗体结合,PE-CY5染料能够标记出细胞表面的特定分子,从而提供关于细胞类型、激活状态和功能的信息。例如,在免疫学研究中,PE-CY5染料可用于检测T细胞、B细胞、巨噬细胞等免疫细胞的表面标记。2.细胞内分子检测:除了检测细胞表面分子外,PE-CY5染料还可以用于检测细胞内的分子。通过细胞通透化处理,PE-CY5染料能够进入细胞内部,与特定分子结合,从而提供关于细胞信号转导、基因表达等信息。通过与凋亡相关蛋白的抗体结合,PE-CY5染料能够标记出凋亡细胞,从而实现对细胞凋亡的定量分析。