当前位置: 首页 > 面试题库 >

H5播放的video视频,如何实现对视频截图?

葛哲彦
2023-03-14
本文向大家介绍H5播放的video视频,如何实现对视频截图?相关面试题,主要包含被问及H5播放的video视频,如何实现对视频截图?时的应答技巧和注意事项,需要的朋友参考一下
    <video controls src="./assets/demo.mp4" width="400" height="300" id="video">
      Sorry, your browser doesn't support embedded videos.
    </video>
    <button onclick="screenShot()">Screenshot</button>
    <script>
      function screenShot() {
        const video = document.getElementById('video');
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0);

        // download picture
        const a = document.createElement('a');
        a.href = canvas.toDataURL('image/png');
        a.download = `${Date.now()}`;
        a.click();
      }
    </script>
 类似资料:
  • 主要内容:HTML视频(Videos)播放,实例,问题以及解决方法,使用 <embed> 标签,实例,使用 <object> 标签,实例,使用 HTML5 <video> 元素,实例,最好的 HTML 解决方法,HTML 5 + <object> + <embed>,使用超链接,实例,关于内联视频的说明,HTML 多媒体标签在 HTML 中播放视频的方法有很多种。 HTML视频(Videos)播放 实例 <video width="320" height="240" controls> <sou

  • 问题描述 bilibili的视频播放器除了Vue都用到了什么技术栈或者怎么实现的 问题出现的环境背景及自己尝试过哪些方法 我今天想要模仿bilibili来写一个视频播放器,但是我写到有关播放/暂停功能时候遇到了一些问题:在Vue3里因为setup是在创建虚拟DOM之前执行的,所以我无法在setup中访问相关DOM节点(<video>)的相关属性,以至于我无法通过监听video的属性来实现响应式。后

  • 用 AVPlayer 类写的简易视频播放器,可以播放来自互联网的视频,支持手势缩放视频。只能播放iPhone支持的视频格式。 目前有两点不足:一是无法调节音量;二是手势放大缩小之后滑动快进快退也不太正常。希望有其他开发者在此基础上继续改进。 [Code4App.com]

  • function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest

  • 如何在Android中通过任何视频链接播放视频(例如—https://youtu.be/SiD77g9KfhA“也可以是另一个媒体门户的另一个视频链接)。我尝试过这样做,但遇到了一个错误。 我的代码 错误。

  • 我遵循了一些关于将JavaFX与Swing(JFrame)结合起来播放视频的教程,但是我得到的只是一个黑屏,视频应该没有任何实际的内容播放,也没有错误报告。 我在这里做错了什么,为什么视频不播放? 我尝试了几个. flv视频,没有一个会开始播放(当我在浏览器中打开它们时,它们确实会播放) 我正在运行jre7和jdk1。安装了K-lite完整编解码器包的windows 8.1 N Pro上的7.0_