js HTML5多媒体影音播放


Posted in Javascript onOctober 17, 2016

之前曾经介绍过,在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)//裁切后绘制图像

js HTML5多媒体影音播放

js HTML5多媒体影音播放

<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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 #Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 #Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 #Javascript
深入理解JS实现快速排序和去重
Oct 17 #Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 #Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 #Javascript
jQuery表单验证简单示例
Oct 17 #Javascript
You might like
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
Prototype String对象 学习
2009/07/19 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
学生实习推荐信范文
2013/11/26 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
镇创先争优活动总结
2014/08/28 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
医院见习报告范文
2014/11/03 职场文书
2014年终个人总结报告
2015/03/09 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技