截取網(wǎng)絡(luò)視頻的第一幀并顯示

2024-04-27 15:10:31

字體：大中小

供稿：網(wǎng)友

1.web端

原理：主要是 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); 的運(yùn)用，這個(gè)函數(shù)可以根據(jù)圖片，視頻和畫布來繪制圖片，詳情可了解 http://www.survivalescaperooms.com.cn/tags/canvas_drawimage.asp

<%@page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body> <video id="video" controls="controls" width="400" height="300"> <source src="./video/78.mp4"> </video> <br> <br> 視頻第一幀圖片： <div id="output"></div> <script type="text/Javascript"> (function() { var video, output; var scale = 0.8; var initialize = function() { output = document.getElementById("output"); video = document.getElementById("video"); video.addEventListener('loadeddata', 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("image/png"); img.width = 400; img.height = 300; output.appendChild(img); }; initialize(); })(); </script></body></html></i>

2.Android端

對(duì)此可使用安卓提供的MediaMetadataRetriever類，可參考如下示例

布局文件：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="200dp" android:orientation="vertical"> <ImageView android:id="@+id/image" android:scaleType="fitXY" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center"/> <VideoView android:id="@+id/video" android:visibility="gone" android:layout_width="match_parent" android:layout_height="wrap_content"/> <FrameLayout android:id="@+id/control" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_gravity="center" android:id="@+id/player" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/play"/> </FrameLayout></FrameLayout>

具體代碼：

public class MainActivity extends Activity { PRivate ImageView mImage; private VideoView mVideo; private FrameLayout mControl; private ImageView mPlayer; private String mPlayerPath; private final int PLAY = 0; private final int PAUSE = 1; private final int COMPLETE = 2; private int state; private boolean isFirst = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mImage = (ImageView) findViewById(R.id.image); mVideo = (VideoView) findViewById(R.id.video); mControl = (FrameLayout) findViewById(R.id.control); mPlayer = (ImageView) findViewById(R.id.player); mControl.setBackgroundColor(0x66000000); mPlayer.setVisibility(View.VISIBLE); mPlayerPath = Environment.getExternalStorageDirectory().getPath() + "/DCIM/Camera/VID_20161103_113849.mp4"; initImage(); initListener(); } private void initImage() { mVideo.setVisibility(View.GONE); mImage.setVisibility(View.VISIBLE); /** * MediaMetadataRetriever class provides a unified interface for retrieving * frame and meta data from an input media file. */ MediaMetadataRetriever mmr = new MediaMetadataRetriever(); mmr.setDataSource(mPlayerPath); Bitmap bitmap = mmr.getFrameAtTime();//獲取第一幀圖片 mImage.setImageBitmap(bitmap); mmr.release();//釋放資源 } private void initListener() { mControl.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (isFirst) { initVideo(); isFirst = false; } else { if (mVideo.isPlaying()) { mVideo.pause(); state = PAUSE; mControl.setBackgroundColor(0x66000000); mPlayer.setVisibility(View.VISIBLE); } else if (state != COMPLETE) { mVideo.start(); state = PLAY; mControl.setBackgroundColor(Color.TRANSPARENT); mPlayer.setVisibility(View.GONE); } else { mVideo.resume();//從新開始播放 state = PLAY; mControl.setBackgroundColor(Color.TRANSPARENT); mPlayer.setVisibility(View.GONE); } } } }); } private void initVideo() { mVideo.setVisibility(View.VISIBLE); mImage.setVisibility(View.GONE); mVideo.setVideoPath(mPlayerPath); mVideo.setOnPreparedListener(new MediaPlayer.OnPreparedListener() { @Override public void onPrepared(MediaPlayer mp) { mVideo.start(); state = PLAY; mControl.setBackgroundColor(Color.TRANSPARENT); mPlayer.setVisibility(View.GONE); } }); mVideo.setOnCompletionListener(new MediaPlayer.OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { state = COMPLETE; mControl.setBackgroundColor(0x66000000); mPlayer.setVisibility(View.VISIBLE); } }); }}

上一篇：div中添加背景圖片及居中顯示

下一篇：EJS 模板&lt;%- 變量%&gt; 與&lt;%= 變量%&gt;的區(qū)別