HTML5 เล่นวิดีโอและขั้นตอนการใช้งานภาพหน้าจอแบบไดนามิกและรหัส (รองรับ Safari ที่ยังไม่ได้ทดสอบอื่น ๆ )

ความคิดเห็น: HTML5 เล่นวิดีโอและภาพหน้าจอแบบไดนามิกซึ่งเป็นคุณสมบัติที่ทันสมัยและยอดเยี่ยมไม่รองรับ Chrom ในขณะนี้รองรับ Safari ที่ยังไม่ผ่านการทดสอบอื่น ๆ หากคุณต้องการทราบโปรดดูอย่างเหมาะสม

ก่อนอื่นอ้างถึงที่อยู่ jQuery เลือก Sina's

<script type = "text/javascript" src = "http://lib.sinaapp.com/js/jquery/1.6/jquery.js"> </script>

เพิ่มแท็กวิดีโอ

<video controls = "controls">

<Source SRC = "1.MP4" />

</video>

จากนั้น js

<script type = "text/javascript">

$ (). พร้อม (ฟังก์ชั่น () {

วิดีโอ var, เอาต์พุต;

var scale = 0.25;

var initialize = function () {

เอาต์พุต = $ ("#output");

วิดีโอ = $ ("#video") รับ (0);

$ ("#capture") คลิก (CaptureImage);

-

var captureimage = function () {

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

canvas.width = video.videowidth * มาตราส่วน;

canvas.height = video.videoheight * มาตราส่วน;

canvas.getContext ('2d')

.DrawImage (วิดีโอ, 0, 0, Canvas.width, Canvas.height);

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

img.src = canvas.todataurl ();

เอาท์พุทการขึ้นอยู่กับ (IMG);

-

$ (เริ่มต้น);

-

</script>

ฉันจะไม่โพสต์การเรนเดอร์