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 相关文章推荐
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
浅谈克隆 JavaScript
Nov 02 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_multisort() 函数的深入解析
2013/06/20 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python音频处理用到的操作的示例代码
2017/10/27 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
大学自荐信
2013/12/12 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
员工辞职信范文
2015/03/02 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python