当前位置：文江博客话题详情

在Canvas Ios上绘制视频可以播放自动播放

发布于 2025-02-07 09:21:49 字数 1306 浏览 0 评论 0 原文

此代码在Mac上正常工作将Onload：Main（）添加到身体标签可以在启动后自动运行在iOS浏览器中，设置按钮后无法自动运行，单击以指向main（）。点击正常玩在iOS下无法执行

Mac和iOS使用Safari浏览器。如何使iOS自动播放正常


function main() { 


const video1= initializeVideo("mv/m4.mp4"); 
VIDEO_CANVAS = document.getElementById('video');

video1.addEventListener('loadeddata', (event) => { 

const context = VIDEO_CANVAS.getContext("2d");


context.canvas.width =  video1.videoWidth * (740 / video1.videoHeight);
context.canvas.height = 740; 



processVideos(video1,0);
}); 
} 


function processVideos(video1,frame1){

if(frame1 <=200 ) 

{  showVideoFrame(video1,frame1);  frame1++;  }
if(frame1>=200) {
     location.reload();
        }
        

    setTimeout(function(){

        processVideos(video1,frame1);
    },30);
}
function showVideoFrame(video,frame){
    var time = frame /  30 ;
    video.currentTime=time;
    const context=VIDEO_CANVAS.getContext("2d");
    
    context.drawImage(video, 0, 0, VIDEO_CANVAS.width,VIDEO_CANVAS.height);
    }
function initializeVideo(filename) {
var video = document.createElement('video');
video.src=filename; 
video.load(); 
return video; 
}

身体内容

<body onload="main()">
 <center> 
 <canvas id="video"></canvas>
 </center>
 </body>

原文

This code works fine on mac
Add onload:main() to the body tag
Can run automatically after startup
In the ios browser can not run automatically, after setting a button, click to point to main(). Click to play normally
under ios
onload cannot be executed

Both mac and ios use safari browser. How to make ios autoplay normal


function main() { 


const video1= initializeVideo("mv/m4.mp4"); 
VIDEO_CANVAS = document.getElementById('video');

video1.addEventListener('loadeddata', (event) => { 

const context = VIDEO_CANVAS.getContext("2d");


context.canvas.width =  video1.videoWidth * (740 / video1.videoHeight);
context.canvas.height = 740; 



processVideos(video1,0);
}); 
} 


function processVideos(video1,frame1){

if(frame1 <=200 ) 

{  showVideoFrame(video1,frame1);  frame1++;  }
if(frame1>=200) {
     location.reload();
        }
        

    setTimeout(function(){

        processVideos(video1,frame1);
    },30);
}
function showVideoFrame(video,frame){
    var time = frame /  30 ;
    video.currentTime=time;
    const context=VIDEO_CANVAS.getContext("2d");
    
    context.drawImage(video, 0, 0, VIDEO_CANVAS.width,VIDEO_CANVAS.height);
    }
function initializeVideo(filename) {
var video = document.createElement('video');
video.src=filename; 
video.load(); 
return video; 
}

body content

<body onload="main()">
 <center> 
 <canvas id="video"></canvas>
 </center>
 </body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猥︴琐丶欲为 2025-02-14 09:21:49

视频的想法是慢动作吗？跳到框架并不容易，因为您不知道已加载了多少视频。在此示例中，我在视频上使用属性 defaultplaybackrate 来控制速度。然后只需播放视频，然后每30毫秒绘制当前的框架。视频结束后清除间隔。

更新

如果要进行自动播放，则可以在播放视频之前尝试静音。另一种选择是让用户首先与页面进行交互，要么单击某些内容（单击事件）或滚动（滚动事件）。您可以在此处阅读更多有关它的信息：

var VIDEO_CANVAS, interval;

document.addEventListener('DOMContentLoaded', e => {
  VIDEO_CANVAS = document.getElementById('video');
  const video = document.createElement('video');
  video.defaultPlaybackRate = .4;
  video.muted = true; // important for autoplay
  
  video.addEventListener('canplaythrough', e => {
    VIDEO_CANVAS.width = e.target.videoWidth * (200 / e.target.videoHeight);
    VIDEO_CANVAS.height = 200;
    
    e.target.play();
    interval = setInterval(function() {showVideoFrame(video);}, 30);
  });
  video.addEventListener('ended', e => {
    clearInterval(interval);
  });
  
  video.src = "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4";
});

function showVideoFrame(video) {
  const context = VIDEO_CANVAS.getContext("2d");
  context.drawImage(video, 0, 0, VIDEO_CANVAS.width, VIDEO_CANVAS.height);
}

<canvas id="video"></canvas>

Is the idea to slow motion the video? It is not easy to jump from frame to frame, because you don't know how much of the video has been loaded. In this example I use the property defaultPlaybackRate on the video to control the speed. And then simply play the video and draw the current frame to the canvas every 30 ms. The interval is cleared when the video has ended.

Update

If this is going to autoplay you can try to mute the video before playing it. An alternative could be to let the user interact with the page first, either clicking something (click event) or scrolling (scroll event) a bit. You can read more about it here: Autoplay guide for media and Web Audio APIs - Web media technologies | MDN

var VIDEO_CANVAS, interval;

document.addEventListener('DOMContentLoaded', e => {
  VIDEO_CANVAS = document.getElementById('video');
  const video = document.createElement('video');
  video.defaultPlaybackRate = .4;
  video.muted = true; // important for autoplay
  
  video.addEventListener('canplaythrough', e => {
    VIDEO_CANVAS.width = e.target.videoWidth * (200 / e.target.videoHeight);
    VIDEO_CANVAS.height = 200;
    
    e.target.play();
    interval = setInterval(function() {showVideoFrame(video);}, 30);
  });
  video.addEventListener('ended', e => {
    clearInterval(interval);
  });
  
  video.src = "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4";
});

function showVideoFrame(video) {
  const context = VIDEO_CANVAS.getContext("2d");
  context.drawImage(video, 0, 0, VIDEO_CANVAS.width, VIDEO_CANVAS.height);
}

<canvas id="video"></canvas>

回复收藏 0 原文

~没有更多了~

关于作者

画▽骨i

暂无简介

文章

30 人气

关注发私信

友情链接

文江博客

在Canvas Ios上绘制视频可以播放自动播放

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

更新

Update

关于作者

相关话题

热门标签

推荐作者

alipaysp_giMRmwQ3mK

爱她像谁

清风疏影

mb_OO8gCSDD

佚名

汹涌人海

友情链接

在Canvas Ios上绘制视频可以播放自动播放

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

更新

Update

关于作者

相关话题

热门标签

推荐作者

alipaysp_giMRmwQ3mK

爱她像谁

清风疏影

mb_OO8gCSDD

佚名

汹涌人海

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。