如何解决如何在JavaScript中加载没有点击事件的函数
<video controls>
<source src="data/uploads/mainvideo-1601674168.mp4" type="video/mp4">
</video>
<canvas width="90" height="50"></canvas>
<button onclick="snap()">Take screenshot</button>
还有js:
<script>
// Get handles on the video and canvas elements
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
// Get a handle on the 2d context of the canvas element
var context = canvas.getContext('2d');
// Define some vars required later
var w,h,ratio;
// Define the size of the rectangle that will be filled (basically the entire element)
context.fillRect(0,w,h);
// Grab the image from the video
context.drawImage(video,h);
// Add a listener to wait for the 'loadedMetadata' state so the video's dimensions can be read
video.addEventListener('loadedMetadata',function() {
// Calculate the ratio of the video's width to height
ratio = video.videoWidth / video.videoHeight;
// Define the required width as 100 pixels smaller than the actual video's width
w = 90;
// Calculate the height based on the video's width and the ratio
h = parseInt(w / ratio,10);
// Set the canvas width and height to the values just calculated
canvas.width = w;
canvas.height = h;
},false);
// Takes a snapshot of the video
function snap() {
// Define the size of the rectangle that will be filled (basically the entire element)
context.fillRect(0,h);
// Grab the image from the video
context.drawImage(video,h);
}
</script>
现在,当我单击按钮时,将显示缩略图。我对js不太熟悉,但是如何不单击按钮就立即显示缩略图?
我在js末尾尝试了此操作,但这不起作用(已加载jquery)
$(document).ready(function() {
snap();
});
解决方法
您只需在脚本的最后一行调用snap()
。您正在使用JS,因此,当您使用onclick="snap()"
时,您会在html onclick事件中调用带有JavaScript的功能snap()。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。