How to play a video on a mobile phone by entering an address through the browser?
A server is built on the mobile terminal.
The server on the mobile phone uses this library:
Set up the server first
Dependency library
First, rely on the libraries we need to build the Server:
compile 'com.koushikdutta.async:androidasync:2.+'
Write simple html
Then we write an html file under assets for browser access, index.html
The simplest is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
hey hey, connected...
</body>
</html>
Start the service and listen on the port
public class MainActivity extends AppCompatActivity {
private AsyncHttpServer server = new AsyncHttpServer();
private AsyncServer mAsyncServer = new AsyncServer();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView(R.layout.activity_main);
server.get("/", new HttpServerRequestCallback() {
@Override
public void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {
try {
response.send(getIndexContent());
} catch (IOException e) {
e.printStackTrace ();
response.code(500).end();
}
}
});
server.listen(mAsyncServer, 54321);
}
@Override
protected void onDestroy() {
super.onDestroy ();
if (server != null) {
server.stop();
}
if (mAsyncServer != null) {
mAsyncServer.stop();
}
}
private String getIndexContent() throws IOException {
BufferedInputStream bInputStream = null;
try {
bInputStream = new BufferedInputStream(getAssets().open("index.html"));
ByteArrayOutputStream baos = new ByteArrayOutputStream();
int len = 0;
byte[] tmp = new byte[10240];
while ((len = bInputStream.read(tmp)) > 0) {
baos.write(tmp, 0, len);
}
return new String(baos.toByteArray(), "utf-8");
} catch (IOException e) {
e.printStackTrace ();
throw e;
} finally {
if (bInputStream != null) {
try {
bInputStream.close();
} catch (IOException e) {
e.printStackTrace ();
}
}
}
}
}
It can be seen that it is very simple to create an AsyncHttpServer object, we call get in onCreate, and set up a get-type url monitor externally. The monitored url is / that is the root directory.
Then call listen, pass in the port number 54321, and start listening on this port.
Stop the server when onDestroy.
When the access to "/" is captured, read the index.html under assets and return it to the browser.
Remember to add network permissions.
Ok, run the demo and test it.
Enter the address, your phone's IP:port number.
Note that the computer and mobile phone are on the same network segment!
Then you should see the following renderings:
Perfect Demo
Next, we return the mp4 on the phone to display it on the browser.
Very simple, since we can listen to / and return an index.html, we can listen to another url and return the file directory.
server.get("/files", new HttpServerRequestCallback() {
@Override
public void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {
JSONArray array = new JSONArray();
File dir = new File(Environment.getExternalStorageDirectory().getPath());
String[] fileNames = dir.list();
if (fileNames != null) {
for (String fileName : fileNames) {
File file = new File(dir, fileName);
if (file.exists() && file.isFile() && file.getName().endsWith(".mp4")) {
try {
JSONObject jsonObject = new JSONObject();
jsonObject.put("name", fileName);
jsonObject.put("path", file.getAbsolutePath());
array.put(jsonObject);
} catch (JSONException e) {
e.printStackTrace ();
}
}
}
}
response.send(array.toString());
}
});
We monitor the Url of /files, and then return the video file in the root directory of Sdcard, splicing it into JSON and returning it.
Here if you reboot, type on your browser:
http://192.168.1.100:54321/files
You will see a bunch of JSON data:
But we need to display it on the html just now, so this request should be initiated by the html page just now:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<title>Title of the document</title>
<script type="text/javascript">
$(function() {
var now = new Date();
var url = 'files' + '?' + now.getTime();
// request JSON data
$.getJSON(url, function(data) {
// edit JSON array
for (var i = 0; i < data.length; i++) {
// Generate a li tag for each object and add it to the ul of the page
var $li = $('<li>' + data[i].name + '</li>');
$li.attr("path", data[i].path);
$("#filelist").append($li);
}
});
});
</script>
</head>
<body>
<ul id="filelist" style="float:left;"></ul>
</body>
</html>
Many friends may not know js, but they should be able to understand, $.getJSONget the returned JSON array, and then traverse to generate a li tag for each Json object and add it to the page.
jQuery is used here, and js also needs to be processed. It is omitted here. It is very simple. Just look at the source code.
At this point, the video directory can already be displayed:
The next step is to click to play. There is a tag called video in the html for playing the video. It has a src attribute for setting the video path for playback.
So all we have to do is:
- Click the name, get the url corresponding to the video, and then set the src attribute to the video.
So what is the url of the video?
We just returned the path of the video, so we just need to monitor another url, and the video file stream will be returned according to the incoming video path.
server.get("/files/.*", new HttpServerRequestCallback() {
@Override
public void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {
String path = request.getPath().replace("/files/", "");
try {
path = URLDecoder.decode(path, "utf-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace ();
}
File file = new File(path);
if (file.exists() && file.isFile()) {
try {
FileInputStream fis = new FileInputStream(file);
response.sendStream(fis, fis.available());
} catch (Exception e) {
e.printStackTrace ();
}
return;
}
response.code(404).send("Not found!");
}
});
We monitored another url as files/xxx.*, after capturing, get the file name, go to SDCard to find the file, and return to the file stream.
The code on the html side is:
<script type="text/javascript">
$(function() {
var now = new Date();
// get the video object
var $video = $("#videoplayer");
var url = 'files' + '?' + now.getTime();
$.getJSON(url, function(data) {
for (var i = 0; i < data.length; i++) {
var $li = $('<li>' + data[i].name + '</li>');
$li.attr("path", data[i].path);
$("#filelist").append($li);
// When clicking, get the path and set the src attribute to the video
$li.click(function() {
var p = "/files/" + $(this).attr("path");
$video.attr("src", "/files/" + $(this).attr("path"));
$video[0].play();
});
}
});
});
</script>
Of course, there is also a video tag inside the body tag on the page.
<video id="videoplayer" controls="controls"> </video>
Here, so the code is introduced~~
summary
Looking back, it is actually starting the server in the app, listening to some urls, and then returning text, json, file streams, etc. in a targeted manner.
Of course, there are a lot of things that can be done, even a PC version of the file browser.
There may be many people who are not familiar with html and js, but it is recommended to have a brief understanding, or type this example, because there is very little code in this example, and it is worth a start-up tutorial.
Source address: https://github.com/suyimin/ShowPhoneMp4