js HTML5多媒体影音播放

 更新时间:2016年10月17日 14:03:11   作者:梧桐下的四叶草   我要评论
这篇文章主要为大家详细介绍了js HTML5多媒体影音播放,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

之前曾经介绍过,在HTML5中可以通过<video>标签在网页中播放影片,且不需要再安装额外的插件,此功能已经带给用户极大的便利。但基本的<video>标签只提供了简单功能的播放器界面,如果想要改变播放器的外观和功能,只能结合<canvas>标签和javascript语句,就能制作出酷炫的播放控制器。

{drawImage}

画布canvas如何与视频video标签结合,达到制作各种视频功能的效果呢?其秘诀在于通过画布重新描绘一次视频的内容,将视频的每个画面都转换成画布的图像,这样就可以通过javascript语言所提供的图像控制方法来操控它们。所以炫酷播放器所使用的视频功能,并不针对video,而是针对描绘出影像的canvas。

能够描绘影像到画布中的方法是“drawImage",此方法允许在canvas中插入画布(canvas),图像(img)和视频(video)等元素。

drawImage方法有三种:

drawImage(image,dx,dy)//原比例绘制图像
drawImage(image,dx,dy,dw,dh)//按设置长宽绘制图像
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)//裁切后绘制图像

<html> 
 <head> 
   <meta charset="utf-8"/> 
   <style> 
    canvas{ 
      border:1px solid black; 
    } 
   </style> 
   
   <script > 
    function draw(){ 
      var imgx = new Image(); 
      imgx.src = 'img/gophers-Slice_Scoreboard.png'; 
      imgx.onload = function(){ 
        var canvas = document.getElementById('myCanvas'); 
        var context = canvas.getContext('2d'); 
        context.drawImage(this,20,20,75,75); 
      } 
    } 
  </script> 
 </head> 
 <body onload="draw()"> 
  <p>Image:</p> 
  <img id="pic"src="img/gophers-Slice_Scoreboard.png" alt="pic" width="50" height="50"> 
  <p>Canvas:</p> 
  <canvas id="myCanvas" style="border:1px solid;"> 
  </canvas> 
 </body> 
</html> 

简单地通过drawImage描绘图像也许看不出来canvas的强大,其实真正精彩的是可以通过画布上描绘的结果加入javascript语句来实现的特效效果或功能。

接下来示范如何用javascript指令动态调整视频播放器的大小。

<html> 
 <head> 
   <meta charset="utf-8"/> 
   <style> 
   </style> 
   
   <script > 
    function eventWindowLoaded(){ 
    var videoElement=document.getElementById("theVideo"); 
    var widthtoHeightRatio=videoElement.width/videoElement.height; 
    var sizeElement=document.getElementById("videoSize"); 
    sizeElement.addEventListener('change',videoSizeChanged,false); 
    function videoChanged(e){ 
      var target=e.target; 
      var videoElement=document.getElementById("theVideo"); 
      videoElement.width=target.value; 
      videoElement.height=target.value/widthtoHeightRatio; 
    } 
    } 
  </script> 
 </head> 
 <body onload="eventWindowLoaded()"> 
 <div> 
  <form>Video Size: 
  <input type="range" id="videoSize" min="80" max="1280" step="1" value="320"/> 
  </form> 
  </div> 
  <div> 
  <video autoplay loop controls id="theVideo" src="funny.mp4" width="320" height="240"></video> 
  </div> 
 </body> 
</html> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript 错误处理与调试经验总结

    JavaScript 错误处理与调试经验总结

    在Web开发过程中,编写JavaScript程序时或多或少会遇到各种各样的错误,有语法错误,逻辑错误。如果是一小段代码,可以通过仔细检查来排除错误,但如果程序稍微复杂点,调试JS便成为一个令Web开发者很头痛的问题。
    2010-08-08
  • ie和firefox不兼容的解决方法集合

    ie和firefox不兼容的解决方法集合

    网页设计很多情况下,需要注意ie跟firefox的不同区别,脚本之家提供了不好这样的文章,大家可以好好看下。
    2009-04-04
  • BootStrap中<li role=

    BootStrap中<li role=

    最近在学习bootstrap3.3.5,遇到一个问题搞不清楚<li role="presentation">到底什么含义?今天小编通过本文给大家详细介绍下,一起看看吧
    2016-12-12
  • js判断undefined类型示例代码

    js判断undefined类型示例代码

    这篇文章主要介绍了js判断undefined类型的实现方法,需要的朋友可以参考下
    2014-02-02
  • javascript smipleChart 简单图标类

    javascript smipleChart 简单图标类

    支持 线性图 区域图 柱状图 饼图 支持多浏览器 用到的是svg vml 之后加上 多层饼图 分段图 和组合图
    2011-01-01
  • 手机号码,密码正则验证

    手机号码,密码正则验证

    神奇的正则表达式可以帮助我们搞定所需的格式验证,常用的有手机号码,密码等,另附上做项目经常用到的一些正则,记录一下
    2014-09-09
  • 用js简单提供增删改查接口

    用js简单提供增删改查接口

    这篇文章主要介绍了用js简单提供增删改查接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 关于layui flow loading占位图的实现方法

    关于layui flow loading占位图的实现方法

    今天小编就为大家分享一篇关于layui flow loading占位图的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 不用ajax实现点击文字即可编辑的方法

    不用ajax实现点击文字即可编辑的方法

    本文给大家分享一段代码不使用ajax实现点击文字即可编辑的方法,代码简单易懂,需要的朋友参考下吧
    2007-12-12
  • javascript 封装Date日期类实例详解

    javascript 封装Date日期类实例详解

    这篇文章主要介绍了javascript-封装Date日期类的相关资料,需要的朋友可以参考下
    2017-05-05

最新评论