一、前面的些唠叨 在我浮生如梦的大学那会儿，貌似flash网站还有点小火，且大凡有点含量的flash站点上，杂七杂八的音效总是少不了。一部分音效是烘托渲染气氛的背景音乐，另外一部分就是促进互动，增强体验的交互声音，例如按钮按下或者是经过时“哔哔”声或是“叭叭”声。而在那个时候，在远离flash的web页面上鲜有声音的交互，即使有，要想实现兼容性，要不借助控件，要不还是通过与flash交互实现（例如我之...
暂不支持chrom 。支持safari .其他未测试 先引用 jquery 地址。选用新浪的 代码如下: 加一个video标签 代码如下: 然后js 代码如下: $().ready(function(){ var video, output; var scale = 0.25; var initialize = function() { output = $("#output"); video = $("#video").get(0); $("#capture").click(captureImage); }; var captureImage = function() { var canvas = document.createElement("canvas"); canvas.width = ...
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 在HTML5中，video元素目前支持三种格式的视频文件， 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 那么在HTML5中如何显示视频呢？例子如...
代码如下: 现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。 代码如下: HTML 5 视频 检测您的浏览器是否支持 HTML5 视频： Check
代码如下: 标签属性：src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条 标签属性：src：视频的URLposter：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 <videoid="media"src="http://www.abc.com/test.mp4"controls width="400px"heigt="400px"> 获取HTMLVideoElement和HTMLAudioE...
HTML5作品，经测试，效果确定不错，遗憾的是只支持谷歌和苹果等以webkit核心的浏览器，网友体验的时候请使用谷歌等浏览器来运行，不然的话无法看到效果，不说了，看效果吧 代码如下: 主要部分代码如下： function ZzxMusic(){ var aa={}; //模块设置 var setting = { newSong:{target:newSong,type:1,firstCount:6,Count:5}, songCharts:{target:newSong,type:1,firstCount:2,Count:4}, singer:{target:newSong,type:1,firstCount:...
网页html 代码如下: Play css样式 代码如下: body{ text-align:center; } header,section,footer,aside,nav,article,hgroup{ display:block; } #skin{ width:700px; margin:10px auto; padding:5px; background:red; border:4px solid black; border-radius:20px; } nav{ margin:5px 0px; } #buttons{ float:left; width:70px; height:22px; } #defaultBar{ position:relative; float:left; width:600px; height:14...
这段时间经常看到开发者在反复询问同一个问题，为什么通过设置src属性，不能播放本地的媒体文件？例如video.src=”D:\test.mp4”。 这是因为浏览器中的JavaScript不能直接直接访问本地资源（例如文件系统，摄像头，麦克风等），除非事先得到了用户的允许。浏览器之所以进行该限制也是很有必要的，试想一下，如果JavaScript能够肆无忌惮的访问本地的文件系统，那么窃取用户隐私数据就变得轻而易举了，当用户访问网络上的某...
是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图，本文使用canvas标签和Javascript配合画出了一个四色渐变的播放按钮效果，效果图：实现代码：代码如下:画按钮您的浏览器不支持Canvas，请升级浏览器！var canvas = document.getElementById('myCanvas');/*获取定义的画布*/var ctx = canvas.getContext('2d');/*利用2维环境中进行绘画*/drawPlayButton(ctx,...
上一篇介绍了html5标签video（播放器）初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用JS来操作video标签，也就是如何对video做一些简单基本的操作，包括了播放器的播放、暂停，音量的读取、设置等写相关操作，从而开始播放器的扩展之路。 本文的目录： 1.获取影片总时长2.播放、暂停3.获取影片已播放时间和设置播放点4.音量的获取和设置 第一、获取影片总时长 对播放器（video）操作，首先要得...
近有在学习html5中video标签（播放器）的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。 网上的教程其实也不少了 w3cschool里面的最为简单而详细，那么这几介绍的是一些更为直接的应用。 本文目录: 1.使用标签2.加上一些必要参数3.自动播放或自动加载4.规范播放器 第一步：使用标签 使用的方法很简单，就是一句代码：代码如下: 第二步：加上一些必要的参数，比如播放...
标签可以在HTML5浏览器中播放音频文件。 默认提供一个控制面板，但是有些时候我们只需要播放声音，控制面板由我们自己来定义其显示的状态。 这里我们可以使用JS来进行控制，代码如下：代码如下:var audio ;window.onload = function(){ initAudio();}var initAudio = function(){ //audio = document.createElement("audio") //audio.src=Never Say Good Bye.ogg audio = document.getElementById(audio);}function getCurrentTim...
歌曲播放我们会发现他的兼容性不是很好，譬如IE上能播放的flash播放器，再firfox或者chrome上就不是很好的应用了，因为有插件的阻碍!HTML5的出现让这一切成为了可能，但是播放器虽然播放了，我们还要关注一下用户的体验度，所以，我们就写了一个HTML兼容的播放器！向下兼容IE6-9、chrome、firfox、opera等主流播放器，应该是全兼容！实现原理代码给大家奉上！ 代码如下:歌词同步播放器-powered by widuu xiaowei* { margin:0; padd...
上图便是这个音频播放器的UI界面图，里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成，看上去有难度的地方就只有CD和打碟器的制作了，在歌曲播放时CD和打碟器都是具有动画交互效果的，这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~ 因为这一期的教程主要是为了展示Html5新增的标签和audio元素的Dom API的使用，所以播放器UI的绘制在...
直接奉上示例代码，废话就不多说了。 代码如下: HTML Audio API HTML5 Audio API HTML5 Audio API demo by http://github.com/LearnShare" target="_blank">LearnShare. Last update @2013-04-23 20:40:00 + add info table update @2013-04-22 14:54:00 + add DOM events update @2013-04-22 12:47:00 + add getCurrentSrc button View code on http://github.com/LearnShare/LearnShare.github.io/tre...