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 相关文章推荐
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
openlayers4实现点动态扩散
Aug 17 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 读取文件的正确方法
2009/04/29 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
node.js中的console用法总结
2014/12/15 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
PyQt5实现简易电子词典
2019/06/25 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python bytes string相互转换过程解析
2020/03/05 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
高中毕业自我鉴定
2013/12/13 职场文书
春节超市活动方案
2014/08/14 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书