Tampilkan postingan dengan label VideoView. Tampilkan semua postingan
Tampilkan postingan dengan label VideoView. Tampilkan semua postingan

Rabu, 29 Maret 2017

VideoView adalah suatu widget atau class library, yang disediakan dalam package Android, yang berfungsi untuk mengelola dan menampilkan Video pada Aplikasi Android. Pada tutorial belajar android kali ini ,pertama kita akan mencoba menampilkan Video lewat jalur local ,yang dimana kita menyimpanya di project ,pada folder raw, kedua kita akan menampilkanya lewat streaming atau online. Berikut mari.

Menampilkan lewat Local Video

1. Pertama buat project baru ,atau yang sudah ada di Android Studio kalian.
2. Kedua kita akan membuat folder raw terlebih dahulu ,pada project Android Studio ,kalian bisa klik kanan pada folder app ,lalu pilih New > Android resource directory.

Membuat folder Android resource directory Android Studio
Membuat folder Android resource directory


Pada bagian New Resource Directory , pilih resource type raw , setelah selesai  pilih tombol Ok.


Folder raw
Folder raw

Kira-kira akan jadinya seperti pada gambar dibawah. Oh ya ,pastikan kalian sudah menyiapkan videonya lalu salin ke folder raw, Sebagai contoh  ,disini saya memberi nama videonya contoh_video.

Folder raw
Folder raw 

3. Pada bagian tab design ,di bagian layout activity_main.xml , Kalian hanya perlu drag dari bagian Pallete ke bagian layar pada layout.


Design Layout
Design Layout

Code activity_main.xml

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         xmlns:tools="http://schemas.android.com/tools"
  5.         android:layout_width="match_parent"
  6.         android:layout_height="match_parent"
  7.         android:id="@+id/activity_main"
  8.         android:layout_marginTop="@dimen/activity_vertical_margin"
  9.         android:layout_marginBottom="@dimen/activity_vertical_margin"
  10.         android:layout_marginRight="@dimen/activity_vertical_margin"
  11.         android:layout_marginLeft="@dimen/activity_vertical_margin"
  12.         >
  13.  
  14.  
  15.     <VideoView
  16.             android:layout_width="350dp"
  17.             android:layout_height="250dp"
  18.             android:id="@+id/videoView"
  19.             android:layout_centerVertical="true"
  20.             android:layout_alignParentLeft="true"
  21.             android:layout_alignParentStart="true"/>
  22. </RelativeLayout>

4. Nah pada Codingan Javanya ,seperti biasa kita mendeklarasi object terlebih dahulu, dan menggunakan Class atau library VideoView.


Code MainActivity.java


DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. package com.okedroid.contohaplikasi;
  2.  
  3. import android.net.Uri;
  4. import android.os.Bundle;
  5. import android.support.v7.app.AppCompatActivity;
  6. import android.widget.MediaController;
  7. import android.widget.VideoView;
  8.  
  9.  
  10. /*
  11. Fathurrahman (okedroid.com)
  12.  */
  13. public class MainActivity extends AppCompatActivity {
  14.  
  15.     VideoView videoView;
  16.   //deklarasi obj
  17.  
  18.     @Override
  19.     protected void onCreate(Bundle savedInstanceState) {
  20.         super.onCreate(savedInstanceState);
  21.         setContentView(R.layout.activity_main);
  22.  
  23.         getSupportActionBar().setTitle("Contoh VideoView");
  24.         getSupportActionBar().setSubtitle("Belajar di okedroid.com");
  25.  
  26.         videoView = (VideoView) findViewById(R.id.videoView);
  27.         //inisialisasi object videoView
  28.         videoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() +"/" + R.raw.contoh_video));
  29.         //digunakan untuk mengidentifikasi resource seperti lokasi video
  30.         videoView.setMediaController(new MediaController(this));
  31.       //menampilkan media controller video
  32.         videoView.start();
  33.         //memulai video
  34.  
  35.     }
  36.  
  37. }




5. Setelah itu ,kita jalankan Aplikasinya ,dengan cara memilih Run di Android Studio.Hasilnya kira-kira akan seperti ini.


Contoh Hasil VideoView Aplikasi
Contoh Hasil VideoView Aplikasi


Menampilkan lewat Streaming atau Online


1. Pertama kalian hanya perlu set permission di AndroidManifest.xml.  Agar Aplikasi kalian diijinkan untuk menggunakan koneksi Internet.

<uses-permission android:name="android.permission.INTERNET" />


2. Lalu ganti method setVideoURI ,menjadi setVideoPath seperti pada codingan dibawah:

Siapkan alamat url video ,yang ingin kalian tampilkan pada Aplikasi Android kalian.

Sebagai contoh, saya menggunakan url video ,yang saya tampilkan seperti video ,yang ada di folder raw diatas (contoh_video) ,hasilnya pun seperti akan terlihat seperti gambar diatas:


Code MainActivity.java


DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. package com.okedroid.contohaplikasi;
  2.  
  3. import android.os.Bundle;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.widget.MediaController;
  6. import android.widget.VideoView;
  7.  
  8.  
  9. /*
  10. Fathurrahman (okedroid.com)
  11.  */
  12. public class MainActivity extends AppCompatActivity {
  13.  
  14.     VideoView videoView;
  15.     //deklarasi obj
  16.  
  17.     @Override
  18.     protected void onCreate(Bundle savedInstanceState) {
  19.         super.onCreate(savedInstanceState);
  20.         setContentView(R.layout.activity_main);
  21.  
  22.         getSupportActionBar().setTitle("Contoh VideoView");
  23.         getSupportActionBar().setSubtitle("Belajar di okedroid.com");
  24.  
  25.         videoView = (VideoView) findViewById(R.id.videoView);
  26.         //inisialisasi object videoView
  27.         videoView.setVideoPath("http://techslides.com/demos/sample-videos/small.mp4");
  28.         //digunakan untuk mengidentifikasi resource alamat url video
  29.         videoView.setMediaController(new MediaController(this));
  30.         //menampilkan media controller video
  31.         videoView.start();
  32.         //memulai video
  33.  
  34.  
  35.     }
  36. }