video视频转成canvas（兼容至IE8+，全原生JS）

最新推荐文章于 2024-06-12 11:59:04 发布
最新推荐文章于 2024-06-12 11:59:04 发布
阅读量5.2k 收藏 5
点赞数
分类专栏： video 文章标签： video视频转成canvas（兼容至IE8+，全原生JS）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29132907/article/details/81508461
版权

这里写图片描述
video视频转成canvas（兼容至IE8+，全原生JS）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<!-- video说明：属性应用
 width="100%"
 height="240px"  /*如果有封面，请设置高度*/
 controls  /*这个属性规定浏览器为该视频提供播放控件*/  
 style="object-fit:fill"  /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/
 webkit-playsinline="true"  /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  
 x-webkit-airplay="true"  /*这个属性还不知道作用*/ 
 playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
 x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
 x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
 x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
 preload="auto" /*这个属性规定页面加载完成后载入视频*/ 
 -->
<video id="video" controls loop autoplay="" width='300' webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" src='http://www.w3school.com.cn/example/html5/mov_bbb.mp4'></video>
<button id="play" class="play">播放</button>
<button id="pause" class="pause">暂停</button>
<!-- <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> -->
<script>
/*
 * video视频转成canvas（兼容至IE8+）
 * Author: tc   Created On: 2018-08-08
 * 
 *  使用方法：
 *      var videoCanvas = new VideoToCanvas(videoDom);
 *
 *  对象的属性：
 *      暂无。
 *
 *  对象的方法：
 *      play       播放视频
 *      pause      暂停视频
 *      playPause  播放或暂停视频
 *      change(src) 切换视频。参数src为切换的视频地址
 */
var VideoToCanvas = (function(window, document) {
  function VideoToCanvas(videoElement) {
    if(!videoElement) {return;}

    var canvas = document.createElement('canvas');
    canvas.width = videoElement.offsetWidth;
    canvas.height = videoElement.offsetHeight;
    ctx = canvas.getContext('2d');

    var newVideo = videoElement.cloneNode(false);

    var timer = null;

    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

    function drawCanvas() {
      ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
      timer = requestAnimationFrame(drawCanvas);
    }

    function stopDrawing() {
      cancelAnimationFrame(timer);
    }

    newVideo.addEventListener('play', function() {
      drawCanvas();
    },false);
    newVideo.addEventListener('pause', stopDrawing, false);
    newVideo.addEventListener('ended', stopDrawing, false);

    videoElement.parentNode.replaceChild(canvas, video);

    this.play = function() {
      newVideo.play();
    };

    this.pause = function() {
      newVideo.pause();
    };

    this.playPause = function() {
      if(newVideo.paused) {
        this.play();
      } else {
        this.pause();
      }
    };

    this.change = function(src) {
      if(!src) {return;}
      newVideo.src = src;
    };

    this.drawFrame = drawCanvas;
  }

  return VideoToCanvas;

})(window, document); 
</script> 
<script>
window.onload=function(){
  var video = document.getElementById('video');
  var videoCanvas = new VideoToCanvas(video);
  var playClass = document.getElementById('play');
  var pauseClass = document.getElementById('pause');

  playClass.addEventListener("click",function(){
    videoCanvas.play();
  },false);
  pauseClass.addEventListener("click",function(){
    videoCanvas.pause();
  },false);
}  
</script>
</body>
</html>
唐策
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端video转canvas总结
CrazBarry的博客
05-10 3770
前言 公司一个客户要求我们参照http://game.flyh5.cn/resources/game/lq_game/2018_9_xmt_c/main.html?v=1557026481做一个病毒式H5供宣传，打开一看就是那些场景应用的H5，主要流程就是一开始有几张照片，点不同照片播放不同视频，播放完视频上传图片生成海报。 我看了看他们的源码是使用白鹭egret+eui做的，动画效果还是不...
前端video如何转化为canvas
qq_26780317的博客
07-15 2505
前言：在PC端，IE9+游览器对原生视频的支持还是不错的，然而一到了移动端就会各种兼容性的问题。在移动端，各大游览器厂商对视频会植入许多它们自定义的交互方式（如默认全屏播放、视频不能初始化播放、窗口置顶等），更麻烦的是，这些被植入的交互还无法去掉。移动端的视频行内自动播放看起来确实很麻烦。 目前主流的处理移动端的视频播放问题： 是使用canvas来替代video； 然而，canvas看起来像是完美的，但是经过测试后，其实有些低端的android手机可能会出现卡顿和动画变糊的情况。 video转canvas的
canvas如何简单粗暴地载入视频
热门推荐
开心大表哥
02-12 1万+
canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法十分的简单粗暴。（粗粗粗粗~~~） 而且可以达到神同步，当视频暂停，canvas里面的视频就暂停，当视频再次开始播放，canvas里面的视频也再次播放。 html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;hea...
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
最新发布
lx_nhs的博客
06-12 702
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
将videojs 视频绘制到canvas上
天边那朵云的博客
07-25 4563
文章转载自嘿嘿嘿https://blog.csdn.net/qq_37540004/article/details/90750529 原理 1.原理其实很简单，做过全景图的同学都知道，球模型+全景图片贴图。 全景视频/全景直播就是 球模型+全景视频素材 。 2.至于播放器样式，可以自己用Js+Dom自定义，或者更改videojs（别的播放器插件也行）的样式 即便你是用原生video也是可...
关于微信H5自动播放视频-canvas实现逐帧动画效果加音频
简单技术
03-14 6757
项目需求   用户进入页面自动播放一段小视频 解决方案一   利用 JS reload 之后执行 video.play 和 video  autoplay 都只能在WEB段实现, 但是到了移动端就执行不了   因为项目应用了微信的JS-SDK,所以只需要做兼容微信内置浏览器   想到微信JS-sdk 的WeixinJSBridgeReady 的方式 执行document.addEventListe...
html5.js-ie浏览器兼容处理文件
04-24
HTML5.js是一个专门为老旧的IE浏览器提供HTML5新特性兼容性的JavaScript库。由于Internet Explorer（尤其是版本8及以下）在支持HTML5标准方面存在显著不足，开发者常常需要借助这类库来确保网站在不同浏览器间的一致...
让IE9以下版本的浏览器兼容HTML5的方法
09-28
为了让IE9及以下版本的浏览器兼容HTML5的新特性，我们需要采取一些技术手段，因为这些旧版的Internet Explorer浏览器原生不支持HTML5的一些新元素和功能。本文将详细介绍一种常用的方法，即通过JavaScript来模拟创建...
IE支持HTML5的解决方法
09-28
var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','); var i = e.length; while...
ie10 windows7
07-02
1. **HTML5支持增强**：IE10是首个全面支持HTML5的微软浏览器，包括对Canvas、Audio、Video等元素的原生支持，以及Web Workers和Web Storage等特性，这极大地增强了网页应用的交互性和多媒体功能。 2. **CSS3兼容性...
IE6支持HTML5
02-26
可以借助Flash插件或者其他的JavaScript库，如Flowplayer或JW Player，来为IE6提供视频和音频播放支持。 6. **图形和Canvas**: IE6不支持HTML5的Canvas元素，可以考虑使用VML（Vector Markup Language）作为替代，...
视频格式转canvas绘制
06-14
ts格式的视频转成canvas绘制，可用于解决h5页面video标签层级问题
html5 canvas 绘制的视频播放控制条
02-15
本js用于创建视频播放控制栏,用于改变html的video捆绑的默认的控制栏，达到美化的目的
html-canvas-video-player：使用HTML canvas播放器在iPhone上播放嵌入式视频
03-03
折旧通知 这旨在用于在iOS上自动播放视频，但从iOS 10开始，存在本机支持的选项playsinline ，请在此处阅读更多信息： : playsinline （Android现在可以使用了很长时间）。 因此，该项目不再得到积极维护。 请使用本机HTML视频而不是它。 如果有人想接管维护工作，请随时提出一个问题，我将把您添加为贡献者。 HTML canvas视频播放器 在iPhone上内联播放视频的简单方法 简单的普通JavaScript类，用于在画布上播放视频。 IE9 +和现代浏览器，但仅适用于iPhone。 如果您正在使用此播放器，请告诉我，我想做一个小型展示柜，谢谢！ 感谢所有发出拉取请求的人。 。 变更日志 少量调整（感谢拉动请求） 添加了音频支持，并将时间线移到了主要的JS文件中 初始发行
canvas 视频音乐播放器
w1366352655的博客
01-02 488
canvas 视频音乐播放器 canvas 视频音乐播放器 var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px var play_sec_img_path = "images/play_btn_s.png";//播放按钮 选中时 var play_clc_i...
html5 canvas播放视频,HTML5炫酷体验：Canvas Video雷人视频
weixin_39906499的博客
06-26 416
【IT168技术】直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件(比如 Flash)来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。如：Canvas+VideoHTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。d...
＜video＞视频使用canvas绘制出来
weixin_45932733的博客
06-25 1537
结合<video>和 <canvas>来实现实时操作视频数据。 <!DOCTYPE html> <html> <head> <style> body { background: black; color:#CCCCCC; } div { float: left; border :1px solid #444444;
Web技术之-调用相机和麦克风（Navigator.mediaDevices）
codingWeb的博客
04-25 1万+
介绍： mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。 语法： var mediaDevices = navigator.mediaDevices; MediaDevices 是一个单例对象。通常，您只需直接使用此对象的成员，例如通过调用navigator.mediaDe...
html视频上传获取预览图,html5 获取音频和视频并显示到canvas上，截图上传
weixin_40002692的博客
06-05 260
(function(){var video = document.getElementById('video');var canvas = document.getElementById('canvas');var canvasContext = canvas.getContext('2d');var audio_context;function (e, data){console.log(e +...
IE兼容HTML5 Canvas：excanvas.js解决方案与矩形绘制教程
在提供的代码示例中，开发者首先引入了`excanvas.js`脚本，这是一个专门为IE浏览器提供兼容性支持的JavaScript库。这个库允许在不支持Canvas的IE版本中模拟Canvas的行为。通过检测浏览器是否支持`getContext()`方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值