time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > HTML5初探多媒体元素视频播放应用示例

HTML5初探多媒体元素视频播放应用示例

时间:2013-05-03 00:40 点击:1279次 字体:[ ]




视频播放

video与audio皆具有以下几种方法:
play 播放媒体元素
pause 暂停媒体元素
load 重新加载播放
canPlayType 检查浏览器是否支持媒体类型

相关事件:
loadstart 浏览器开始在网上寻找媒体数据
progress 正在获取数据
suspend 暂停获取数据,但下载过程并未正常结束
abort 数据下载结束前终止获取,但不是错误引起
error 获取数据过程出错
emptied 载入发生错误或者浏览器在选择播放格式时又调用了load方法重新载入
stalled 浏览器尝试获取媒体数据失败
play 当执行play方法时触发(即将播放)
pause 当执行pause方法时触发
......
太多了,以后还是查资料算了

  1. 视频播放  
  2.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3.  <html xmlns="http://www.w3.org/1999/xhtml"> 
  4.  <head> 
  5.      <title></title> 
  6.      <script src="../jquery-1.7.1.js" type="text/javascript"></script> 
  7.      <script type="text/javascript"> 
  8.          $(document).ready(function () {  
  9.              var v = $('#v')[0];  
  10.              v.addEventListener('error', function () {  
  11.                  switch (v.error.code) {  
  12.                      case MediaError.MediaError_DECODE:  
  13.                          alert('解码失败');  
  14.                          break;  
  15.                  }  
  16.    
  17.              }, false);  
  18.    
  19.              $('#play').click(function () {  
  20.                  v.play();  
  21.              });  
  22.              $('#pause').click(function () {  
  23.                  v.pause();  
  24.              });  
  25.    
  26.          });  
  27.      </script> 
  28.  </head> 
  29.  <body> 
  30.      
  31.      <video id="v"src="tianzui.mp4" width="400px"heigt="400px" controls="controls"></video>   
  32.      <br /> 
  33.      <button id="play">播放</button> 
  34.      <button id="pause">暂停</button> 
  35.  </body> 
  36.  </html> 

奇怪的是只有google可以,其它不行!!!

  1. HTTP“Content-Type”中的“video/mp4”不支持。媒体资源 http://localhost:3317/html5%E4%B8%8Ecss3/04%E5%A4%9A%E5%AA%92%E4%BD%93%E6%92%AD%E6%94%BE/tianzui.mp4 加载失败。 

据说该如此这般操作。。。

  1.  
  2. <video width="320" height="240" controls="controls">    
  3.  
  4.     <source src="a.ogg" type="video/ogg">   
  5.  
  6.     <source src="a.mp4" type="video/mp4">       
  7.  
  8.     your browser does not support the video tag.  
  9.  
  10.     </video> 

 

 



本文地址 : http://www.fengfly.com/plus/view-212669-1.html
标签: HTML5
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: