html5如何在图片上t添加视频播放,HTML5 视频、图片截图实例

深藏阁楼爱情的钟 2022-10-06 09:51 141阅读 0赞

(function() \{

"use strict";

var video, $output;

//var scale = 0.25;

var scale = 1;

var initialize = function() \{

$output = $("\#output");

video = $("\#video").get(0);

$("\#capture").click(captureImage);

\};

var captureImage = function() \{

var canvas = document.createElement("canvas");

canvas.width = video.videoWidth \* scale;

canvas.height = video.videoHeight \* scale;

canvas.getContext('2d')

.drawImage(video, 0, 0, canvas.width, canvas.height);

var img = document.createElement("img");

img.src = canvas.toDataURL();

$output.prepend(img);

\};

$(initialize);

\}());

type="video/mp4">

播放

暂停

停止

后退

前进

截图

2、图片截图：

小雨在线-开发测试

function takeScreenshot() \{

console.log('test');

html2canvas(document.getElementById('view'), \{

onrendered: function(canvas) \{

document.body.appendChild(canvas);

\},

// width: 300,

// height: 300

\});

\}

$(function () \{

//alert("1111111");

\});

截取表格元素：

<table> 
 <tbody> 
  <tr> 
   <td>开营，成功激励团队建设</td> 
   <td>团队展示 流程管理</td> 
   <td>约翰库缇斯 无臂女人感恩坚持</td> 
   <td>激情开营</td> 
   <td>韩教授</td> 
  </tr> 
  <tr> 
   <td>开营，成功激励团队建设</td> 
   <td>团队展示 流程管理</td> 
   <td>约翰库缇斯 无臂女人感恩坚持</td> 
   <td>激情开营</td> 
   <td>韩教授</td> 
  </tr> 
  <tr> 
   <td>开营，成功激励团队建设</td> 
   <td>团队展示 流程管理</td> 
   <td>约翰库缇斯 无臂女人感恩坚持</td> 
   <td>激情开营</td> 
   <td>韩教授</td> 
  </tr> 
 </tbody> 
</table>

播放

暂停

停止

后退

前进

截图1

截图

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5学习(多媒体，播放视频)

> html5学习(多媒体，播放视频) > > 播放视频主要是使用<video></video>标签，我本篇文章只是抛砖引玉，还有很多<video>标签的api我没列举

浅浅的花香味﹌/ 2022年12月31日 06:21/ 0 赞/ 121 阅读

相关 html5 小视屏,视频网HTML5播放小工具

Failed to load resource: net::ERRBLOCKEDBYCLIENT dyl.js?171030:1 \[Deprecation\] chrome

喜欢ヅ旅行/ 2022年10月09日 14:24/ 0 赞/ 208 阅读

相关 html5如何在图片上t添加视频播放,HTML5 视频、图片截图实例

(function() \{ "use strict"; var video, $output; //var scale = 0.25; var scale = 1;

深藏阁楼爱情的钟/ 2022年10月06日 09:51/ 0 赞/ 142 阅读

相关 html5视频播放解决方案

html5没学习之前总觉的很神秘。近期通过学习和研究html5有点成果，特总结分享给大家。众所周知应用开发分两种：一是原生的native app 二是web ap

秒速五厘米/ 2022年09月23日 11:59/ 0 赞/ 195 阅读

相关 html5视频播放解决方案

关键词：html5 nativeapp webapp mp4 H.264 html5没学习之前总觉的很神秘。近期通过学习和研究html5有点成果，特总结分享给

桃扇骨/ 2022年07月21日 11:14/ 0 赞/ 239 阅读

相关 html5＜canvas在画布上画视频和图片>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

爱被打了一巴掌/ 2022年06月15日 07:25/ 0 赞/ 316 阅读

相关 html5_视频播放

1. 视频播放 <table> <tbody> <tr> <td style="background:rgb(213,213,213);"><p><stro

悠悠/ 2022年05月25日 05:08/ 0 赞/ 320 阅读

相关 html5视频播放

<!DOCTYPE html> <head> <meta charset=utf-8> <title>html5播放器</title>

逃离我推掉我的手/ 2022年03月18日 09:24/ 0 赞/ 365 阅读

相关 html5自动播放视频

html5可以直接播放视频。就用标记`<video>`即可，真好。可是怎么自动播放视频？不是有"autoplay"吗？但是，无效。任凭你设属性，或是`video.pla

男娘i/ 2022年03月01日 14:14/ 0 赞/ 368 阅读

相关网页嵌入Bilibili HTML5视频播放

Bilibili好在无广告，速度也挺快，无奈B站官方的视频嵌入是Flash的形式，但B站又是支持HTML5播放的，那么问题来了，外站如何嵌入HTML5的播放形式呢？参考了这

深藏阁楼爱情的钟/ 2022年01月12日 01:17/ 0 赞/ 383 阅读