前端video如何转化为canvas

前言:在PC端,IE9+游览器对原生视频的支持还是不错的,然而一到了移动端就会各种兼容性的问题。在移动端,各大游览器厂商对视频会植入许多它们自定义的交互方式(如默认全屏播放、视频不能初始化播放、窗口置顶等),更麻烦的是,这些被植入的交互还无法去掉。移动端的视频行内自动播放看起来确实很麻烦。
目前主流的处理移动端的视频播放问题:
是使用canvas来替代video;
然而,canvas看起来像是完美的,但是经过测试后,其实有些低端的android手机可能会出现卡顿和动画变糊的情况。
video转canvas的主要原理:是将视频播放的每一帧都绘制到一个canvas中,这样这个canvas连起来看便像是视频动画了。
一、代码

DOCTYPE html>
<html style="font-size:100px;">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <title>Purchasedtitle>
    <script src="./asset/js/rem.js">script>
    <link rel="stylesheet" href="asset/css/reset.css">
    <link rel="stylesheet" href="asset/css/index.css">
    <style>
        body {
            background:#000;
        }
    style>
head>
<body>
	<section class="video_content">
		<video x5-video-player-fullscreen="true" autoplay="autoplay" x5-video-player-type="h5" muted width="100%" id="video" loop style="position: absolute; top: -1000px;"
                x5-playsinline="true" playsinline="true" webkit-playsinline="true">
                    <source src="asset/video/video.mp4">			source>
                video>
                <div id="canvas_box">
                    <canvas id="canvas">canvas>
                div>
	section>
	<script src="asset/js/jquery.min.js">script>
	<script>
	//canvas
	$(document).ready(function(){
                var canvas, context, video, fps = 30;
                video = document.getElementById('video')
                canvas = document.getElementById('canvas')
                console.log('屏幕宽度'+window.screen.width);
                console.log('屏幕高度'+window.screen.height);
                //获取屏幕的宽度
                let  clientWidth = window.screen.width;
                let  clientHeight = window.screen.height;
                canvas.setAttribute('width',clientWidth+'px');
                let canvasHeight = Math.floor(clientHeight*0.7);
                canvas.setAttribute('height',canvasHeight+'px');
                context = canvas.getContext('2d')
                    
                   
                function videoLoop() {
                    if (video && !video.paused && !video.ended) {
                        context.drawImage(video, 0, 0, 400, 400)
                        setTimeout(videoLoop, 1000 / fps)
                    }
                }
                video.addEventListener('canplay', function () {
                    video.play()
                    setTimeout(videoLoop, 1000 / 30)
                })

            
        });
	script>
body>

效果图:
前端video如何转化为canvas_第1张图片

参考博客:
使用画布处理视频 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
JS工具库封装:video转化成canvas:https://blog.csdn.net/u011200023/article/details/73733610
前端video如何转化为canvas https://blog.csdn.net/c_kite/article/details/81486746
canvas学习笔记(一)----关于css设置canvas画布大小的问题 https://blog.csdn.net/csm0912/article/details/52963240
video视频转成canvas(兼容至IE8+,全原生JS) https://blog.csdn.net/qq_29132907/article/details/81508461?utm_medium=distribute.pc_relevant_download.none-task-blog-2defaultBlogCommendFromBaidudefault-2.test_version_3&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-2defaultBlogCommendFromBaidudefault-2.test_version_
JS工具库封装:video转化成canvas http://www.4u4v.net/js-gong-ju-ku-feng-zhuang-video-zhuan-huan-cheng-canvas.html
canvas无法使用rem单位的解决方案 https://segmentfault.com/a/1190000003502824
前端canvas动画如何转成mp4视频 https://www.jianshu.com/p/4f007291e74c?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

你可能感兴趣的:(JS纪录篇,video转化成canvas,canvas)