เนื้อหา
- วิธีฝังวิดีโอ YouTube ในแอพ Android ของคุณ
- การรับรหัสวิดีโอ YouTube
- รับลายนิ้วมือ SHA-1 ของโครงการ
- ลงทะเบียนกับ Google API Console
- ดาวน์โหลด YouTube Android Player API
- อัพเดท Manifest ของคุณ
- สร้างเค้าโครงเครื่องเล่น YouTube
- การใช้งานเครื่องเล่น YouTube
- 1. ขยาย YouTubeBaseActivity
- 2. เริ่มต้นโปรแกรมเล่น YouTube
- 3. ใช้งานบนการเริ่มต้นการเข้าถึงและการเริ่มต้นการเรียกค้น
- การเล่นวิดีโอ YouTube: รหัสที่สมบูรณ์
- ทดสอบ YouTube Android Player API
- แสดงเนื้อหา Dailymotion ใน WebView
- รับรหัสวิดีโอ Dailymotion
- การเพิ่ม Dailymotion SDK
- กำลังร้องขอการเข้าถึงอินเทอร์เน็ต
- การเพิ่มวิดเจ็ต PlayerWebView ของ Dailymotion
- การกำหนดค่า Dailymotion PlayerWebView ของเรา
- การฝังวิดีโอ Vimeo
- การอัพเดท Manifest
- การเพิ่ม WebView ให้กับ UI ของเรา
- เลือกวิดีโอของคุณ
- การแสดงหน้าเว็บในแอพ Android ของคุณ
- ทดสอบแอป Vimeo ของคุณ
- ห่อ
เมื่อ MediaController ปรากฏบนหน้าจอคุณสามารถเล่นหยุดชั่วคราวกรอถอยหลังและกรอไปข้างหน้าอย่างรวดเร็วและข้ามไปที่จุดใดก็ได้ภายในคลิปโดยการลากแถบความคืบหน้าของ MediaController
วิธีฝังวิดีโอ YouTube ในแอพ Android ของคุณ
การฝังไฟล์วิดีโอในแอปพลิเคชันของคุณเป็นวิธีที่ยอดเยี่ยมในการตรวจสอบว่าวิดีโอพร้อมใช้งานเสมอโดยไม่คำนึงถึงการเชื่อมต่ออินเทอร์เน็ตของอุปกรณ์ อย่างไรก็ตามการฝังวิดีโอขนาดใหญ่ที่มีความละเอียดสูงในแอปของคุณก็เป็นวิธีที่ดีในการเพิ่มขนาด APK ของคุณ!
หากคุณกังวลเกี่ยวกับขนาด APK หรือแอปพลิเคชันของคุณมีวิดีโอที่เพิ่มความพิเศษไว้แล้วคุณอาจต้องการเผยแพร่วิดีโอเหล่านั้นไปยังแพลตฟอร์มออนไลน์แล้วสตรีมผ่านแอปพลิเคชันของคุณในขณะทำงาน
เมื่อพูดถึงการเผยแพร่วิดีโอออนไลน์มีเว็บไซต์หนึ่งเว็บไซต์ที่สามารถนึกถึงได้ทันทีดังนั้นในส่วนนี้ฉันจะแสดงวิธีการฝัง ใด วิดีโอ YouTube ในแอปของคุณโดยใช้ไลบรารีไคลเอ็นต์ YouTube Android Player API
การรับรหัสวิดีโอ YouTube
ในการเริ่มต้นคุณต้องตัดสินใจว่าวิดีโอ YouTube ใดที่คุณต้องการแสดงแล้วดึงรหัสวิดีโอที่ไม่ซ้ำกัน
คุณสามารถใช้วิดีโอ YouTube ใดก็ได้ แต่ฉันกำลังเลือก "รายการโปรดของ" 2018 "โปรดโหลดวิดีโอที่คุณเลือกและดู URL ในแถบที่อยู่ของเบราว์เซอร์ตัวอย่างเช่น URL ของวิดีโอคือ:
youtube.com/watch?v=hJLBcViaX8Q
ID เป็นส่วนหนึ่งของ URL ที่ระบุวิดีโอนี้โดยเฉพาะซึ่งเป็นสตริงอักขระที่ส่วนท้ายของ URL (โดยทั่วไปทุกอย่างหลังจากสัญลักษณ์“ =”) รหัสวิดีโอสำหรับวิดีโอคือ:
hJLBcViaX8Q
จดบันทึก ID ของวิดีโอตามที่เราจะใช้ในภายหลัง
รับลายนิ้วมือ SHA-1 ของโครงการ
ในการเข้าถึง YouTube Android Player API คุณจะต้องสร้างคีย์ API ด้วยข้อ จำกัด ของ Android สิ่งนี้เกี่ยวข้องกับการเชื่อมโยงคีย์ API กับชื่อแพคเกจเฉพาะของคุณและลายนิ้วมือใบรับรอง (SHA-1)
คุณสามารถดึงลายนิ้วมือ SHA-1 ของโครงการของคุณผ่านทาง Gradle Console:
- เลือกแท็บ Gradle ทางด้านขวาของหน้าต่าง Android Studio
- เลือกโมดูล“ แอป” ตามด้วย“ งาน> Android> การลงนามรายงาน”
- เปิดแท็บ Gradle Console ที่ปรากฏขึ้นที่ด้านล่างขวาของหน้าจอ
- Gradle Console จะเปิดขึ้นโดยอัตโนมัติ ค้นหาค่า SHA-1 ในหน้าต่างนี้แล้วจดบันทึก
เรากำลังใช้ลายนิ้วมือใบรับรองการแก้ไขข้อบกพร่องซึ่งเหมาะสำหรับการทดสอบแอปพลิเคชันเท่านั้น ก่อนที่จะเผยแพร่แอปคุณควรสร้างคีย์ API ใหม่ตามใบรับรองการออกแอปพลิเคชันนั้นเสมอ
ลงทะเบียนกับ Google API Console
ก่อนที่คุณจะสามารถใช้ YouTube Android Player API คุณต้องลงทะเบียนแอปพลิเคชันของคุณในคอนโซล Google API:
- ตรงไปที่ API Console
ในส่วนหัวให้เลือกชื่อโครงการปัจจุบันของคุณ (ตำแหน่งเคอร์เซอร์อยู่ในภาพหน้าจอต่อไปนี้)
- ในหน้าต่างถัดไปเลือก“ โครงการใหม่”
- ตั้งชื่อโครงการของคุณแล้วคลิก "สร้าง"
- ในเมนูด้านซ้ายเลือก "ข้อมูลรับรอง"
- คลิกปุ่ม“ สร้างข้อมูลรับรอง” สีน้ำเงินจากนั้นเลือก“ คีย์ API”
- คีย์ API ของคุณจะปรากฏในป๊อปอัพซึ่งรวมถึงการแจ้งให้ จำกัด คีย์ API นี้ คีย์ที่ จำกัด มีความปลอดภัยมากขึ้นดังนั้นหากคุณไม่ต้องการรหัส API ที่ไม่ จำกัด ให้เลือก "จำกัด รหัส"
- ในหน้าจอถัดไปให้ตั้งชื่อ API ที่สำคัญของคุณ
- เลือกปุ่มตัวเลือก“ แอพ Android”
- คลิก“ เพิ่มชื่อแพ็คเกจและลายนิ้วมือ”
- คัดลอก / วางลายนิ้วมือ SHA-1 ของโครงการของคุณลงในส่วนถัดไปจากนั้นป้อนชื่อแพคเกจของโครงการของคุณ (ซึ่งจะปรากฏที่ด้านบนของทุกไฟล์คลาส Java และในรายการของโครงการของคุณ)
- เมื่อคุณพอใจกับข้อมูลที่คุณป้อนให้คลิก "บันทึก"
ดาวน์โหลด YouTube Android Player API
ขั้นต่อไปคุณจะต้องดาวน์โหลดไลบรารีไคลเอ็นต์ YouTube Android Player API เมื่อใช้ห้องสมุดนี้ขอแนะนำให้คุณเปิดใช้งาน ProGuard เพื่อช่วยให้ APK มีน้ำหนักเบาที่สุดเท่าที่จะเป็นไปได้
วิธีเพิ่มห้องสมุด YouTube ลงในโครงการของคุณ:
- ตรงไปที่เว็บไซต์ YouTube Android Player และดาวน์โหลดเวอร์ชันล่าสุด
- แตกไฟล์ zip ที่ตามมา
- เปิดโฟลเดอร์ที่เพิ่งซิปใหม่และไปที่โฟลเดอร์ย่อย“ libs” - ควรมีไฟล์“ YouTubeAndroidPlayerApi.jar”
- ใน Android Studio ให้สลับไปที่มุมมอง "โครงการ"
- เพื่อให้แน่ใจว่าห้องสมุด YouTube รวมอยู่ในเส้นทางการสร้างของคุณคุณจะต้องนำเข้า. jar เข้าสู่โครงการของคุณ
/ libs” ไดเรกทอรี เปิดโฟลเดอร์ "แอพ / libs" ของโครงการแล้วลากและวาง. jar เข้าสู่ตำแหน่ง
- เปิดไฟล์ build.gradle ของคุณและเพิ่มไลบรารี YouTube เป็นการอ้างอิงโครงการ:
การพึ่งพา {การนำไปใช้งาน fileTree (dir: libs, include:) การนำไปใช้งาน com.android.support:appcompat-v7:28.0.0 การนำไปใช้งาน com.android.support:design:28.0.0 การนำไปใช้งาน com.android.support.constraint: constraint-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // เพิ่มไฟล์ // implementation (libs / YouTubeAndroidPlayerApi.jar) ต่อไปนี้}
- เมื่อได้รับแจ้งให้ซิงค์ไฟล์ Gradle ของคุณ
อัพเดท Manifest ของคุณ
หากแอปพลิเคชันของคุณกำลังจะแสดง ใด เนื้อหาวิดีโอออนไลน์จากนั้นจำเป็นต้องเข้าถึงอินเทอร์เน็ต
เปิดรายการของโครงการและเพิ่มการอนุญาตทางอินเทอร์เน็ต:
เพื่อให้ผู้ใช้ได้สัมผัสกับประสบการณ์ภาพยนตร์แบบจอกว้างฉันยังได้ตั้งค่า MainActivity ให้เปิดในโหมดแนวนอน:
สร้างเค้าโครงเครื่องเล่น YouTube
คุณสามารถแสดงวิดีโอ YouTube โดยใช้:
- YouTubePlayerView หากคุณต้องการใช้ YouTubePlayerView ในเลย์เอาต์ของคุณคุณจะต้องขยาย YouTubeBaseActivity ในคลาสกิจกรรมที่เกี่ยวข้องของเลย์เอาต์นั้น
- YouTubePlayerFragment นี่เป็นส่วนที่มี YouTubePlayerView หากคุณเลือกที่จะใช้ YouTubePlayerFragment เคยชิน ต้องขยายจาก YouTubeBaseActivity
ฉันจะใช้ YouTubePlayerView ดังนั้นให้เปิดไฟล์“ activity_main.xml” ของโครงการและเพิ่มวิดเจ็ต YouTubePlayerView:
การใช้งานเครื่องเล่น YouTube
ถัดไปเปิด MainActivity ของคุณและทำภารกิจต่อไปนี้:
1. ขยาย YouTubeBaseActivity
เนื่องจากเราใช้ YouTubePlayerView ในเค้าโครงของเราเราจึงต้องขยาย YouTubeBaseActivity:
MainActivity ระดับสาธารณะขยาย YouTubeBaseActivity {
2. เริ่มต้นโปรแกรมเล่น YouTube
เราเริ่มต้นโปรแกรมเล่น YouTube โดยเรียก initialize () และส่งผ่านคีย์ API ที่เราสร้างไว้ก่อนหน้านี้:
YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); youTubePlayerView.initialize (YOUR_API_KEY ใหม่ YouTubePlayerOnInitializedListener () {
3. ใช้งานบนการเริ่มต้นการเข้าถึงและการเริ่มต้นการเรียกค้น
สุดท้ายเราต้องระบุว่าแอปพลิเคชันของเราควรมีปฏิกิริยาอย่างไรขึ้นอยู่กับว่าการเริ่มต้นนั้นสำเร็จหรือล้มเหลว หากผู้เล่น YouTube เริ่มต้นได้สำเร็จเราสามารถโหลดวิดีโอของเราโดยส่งรหัสวิดีโอที่ไม่ซ้ำกัน:
โมฆะสาธารณะ onInitializationSuccess (ผู้ให้บริการ YouTubePlayer, YouTubePlayer youTubePlayer, บูลีน b) {// ระบุรหัสวิดีโอ // youTubePlayer.loadVideo ("hJLBcViaX8Q");
ต่อไปเราต้องบอกแอปพลิเคชันของเราว่าควรจัดการกับการเริ่มต้นล้มเหลวได้อย่างไร ฉันจะแสดง Toast:
โมฆะสาธารณะ onInitializationFailure (ผู้ให้บริการ YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult YouTube) {Toast.makeText (MainActivity.this "เกิดข้อผิดพลาด", Toast.LENGTH_SHORT) }
การเล่นวิดีโอ YouTube: รหัสที่สมบูรณ์
เพิ่มสิ่งที่กล่าวข้างต้นลงใน MainActivity ของคุณและคุณควรท้ายด้วยสิ่งนี้:
นำเข้า android.os.Bundle; นำเข้า android.widget.Toast; นำเข้า com.google.android.youtube.player.YouTubeBaseActivity; นำเข้า com.google.android.youtube.player.YouTubeInitializationResult; นำเข้า com.google.android.youtube.player.YouTubePlayer; นำเข้า com.google.android.youtube.player.YouTubePlayerView; // ขยาย YouTubeBaseActivity // public class MainActivity ขยาย YouTubeBaseActivity {// อย่าลืมแทนที่ด้วยคีย์ API ของคุณเอง // สตริงสุดท้ายสาธารณะคงที่ YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override ที่ได้รับการป้องกันเป็นโมฆะ onCreate (บันเดิลที่บันทึกไว้InstanceState) {super.onCreate (hiddenInstanceState) setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // เริ่มต้นโปรแกรมเล่น YouTube // youTubePlayerView.initialize (YOUR_API_KEY, ใหม่ YouTubePlayerOnInitializedListener () {@Override // หากโปรแกรมเล่น YouTube เริ่มต้นได้สำเร็จ ... // เป็นโมฆะสาธารณะในการเริ่มต้นโปรแกรม YouTube (YouTubePlayer b) {// .. จากนั้นเริ่มเล่นวิดีโอ // youTubePlayer.loadVideo ต่อไปนี้ ("hJLBcViaX8Q");} @Override // หากการกำหนดค่าเริ่มต้นล้มเหลว ... // โมฆะสาธารณะในผู้ใช้เริ่มต้นที่InInialialization {//... จากนั้นแสดง toast // Toast.makeText (MainActivity.this "เกิดข้อผิดพลาด", Toast.LENGTH_SHORT) .show ();}}); }}
ทดสอบ YouTube Android Player API
คุณสามารถทดสอบแอปพลิเคชันนี้บนสมาร์ทโฟนหรือแท็บเล็ต Android จริงหรือ AVD หากคุณกำลังใช้ AVD ตรวจสอบให้แน่ใจว่าคุณใช้อิมเมจระบบที่มีบริการ Google Play ต้องติดตั้งแอป YouTube บนอุปกรณ์ AVD หรืออุปกรณ์ Android จริงเนื่องจาก YouTube API อาศัยบริการที่จัดจำหน่ายซึ่งเป็นส่วนหนึ่งของแอป YouTube สำหรับ Android
ติดตั้งโครงการบนอุปกรณ์ของคุณและวิดีโอ YouTube ควรเริ่มเล่นโดยอัตโนมัติทันทีที่แอปพลิเคชันโหลด หากคุณแตะวิดีโอคุณจะสามารถเข้าถึงตัวควบคุม YouTube ที่คุ้นเคยทั้งหมดที่คุณสามารถใช้เพื่อหยุดชั่วคราวเล่นกรอไปข้างหน้าและกรอวิดีโอย้อนกลับ
แสดงเนื้อหา Dailymotion ใน WebView
เมื่อพูดถึงการฝังวิดีโอในแอป Android ของคุณมีแพลตฟอร์มการแชร์วิดีโอที่หลากหลายที่คุณสามารถเลือกได้และบางแพลตฟอร์มยังมี SDK ที่ผลิตขึ้นโดยเฉพาะเพื่อช่วยให้คุณโต้ตอบกับเนื้อหาของพวกเขารวมถึง Dailymotion
Dailymotion Player SDK สำหรับ Android นำเสนอ wrapper บาง ๆ รอบองค์ประกอบ WebView ของ Android ซึ่งทำให้ง่ายต่อการฝังวิดีโอ Dailymotion ในแอปพลิเคชันของคุณ
ในส่วนนี้ฉันจะแสดงวิธีการสตรีมวิดีโอใด ๆ จากเว็บไซต์ Dailymotion โดยใช้ Dailymotion Player SDK บุคคลที่สาม
รับรหัสวิดีโอ Dailymotion
ประการแรกตรงไปที่ Dailymotion ค้นหาวิดีโอที่คุณต้องการแสดงแล้วดึงรหัสวิดีโอ
ฉันจะใช้วิดีโอนี้ในเวลาหมอกซึ่งมี URL ต่อไปนี้:
www.dailymotion.com/video/x71jlg3
รหัสวิดีโอเป็นสตริงอักขระที่ไม่ซ้ำกันในตอนท้ายของ URL ดังนั้นรหัสวิดีโอของฉันคือ: x71jlg3
การเพิ่ม Dailymotion SDK
เนื่องจากเรากำลังใช้ Dailymotion SDK เราจำเป็นต้องประกาศว่าเป็นการพึ่งพาโครงการ เปิดไฟล์ build.gradle ของโครงการและเพิ่มรายการต่อไปนี้:
การพึ่งพา {การนำไปใช้งาน fileTree (dir: libs, include:) // เพิ่มการดำเนินการต่อไปนี้ // การใช้งาน com.dailymotion.dailymotion-sdk-android: sdk: การใช้งาน com.android.support: แอพพลิเคชั่น com.android.support:design:28.0.0 การใช้งาน com.android.support.constraint: ข้อ จำกัด เค้าโครง: 1.1.3 การทดสอบการใช้งาน Junit: junit: 4.12 androidTestImplementation com.android.support.test: วิ่ง: 1.0.2}
เมื่อได้รับแจ้งให้เลือก“ ซิงค์โครงการกับไฟล์ Gradle”
โปรดทราบว่าโดยค่าเริ่มต้น Dailymotion SDK จะให้คุณเข้าถึงข้อมูลสาธารณะของ Dailymotion เช่นชื่อและคำอธิบายของวิดีโอคุณสามารถทำงานเพิ่มเติมบางอย่างได้โดยลงทะเบียนแอปพลิเคชันของคุณด้วยแพลตฟอร์ม Dailymotion แต่เนื่องจากเราต้องการฝังวิดีโอเราไม่จำเป็นต้องกังวลเกี่ยวกับการลงทะเบียนแอปพลิเคชันของเรา
หากคุณสนใจที่จะเพิ่มฟังก์ชั่น Dailymotion ลงในแอปของคุณคุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการลงทะเบียนแอปพลิเคชันของคุณด้วย Dailymotion ได้ที่เอกสารอย่างเป็นทางการ
กำลังร้องขอการเข้าถึงอินเทอร์เน็ต
อีกครั้งเรากำลังสตรีมเนื้อหาจากเวิลด์ไวด์เว็บดังนั้นโครงการของเราต้องได้รับอนุญาตจากอินเทอร์เน็ต:
ทุกกิจกรรมที่แสดงเนื้อหา Dailymotion ต้องมีแอตทริบิวต์“ android: configChanges” ดังนั้นให้เพิ่มสิ่งต่อไปนี้ลงใน MainActivity ของคุณ:
การเพิ่มวิดเจ็ต PlayerWebView ของ Dailymotion
ส่วนประกอบที่สำคัญของ Dailymotion SDK คือองค์ประกอบ PlayerWebView UI ซึ่งจะให้ส่วนที่ห่อหุ้มรอบองค์ประกอบ WebView ของ Android
เราจะสำรวจ WebViews โดยละเอียดในส่วนต่อไปนี้ แต่ WebViews จะให้วิธีการฝังหน้าเว็บในแอปพลิเคชันของคุณเป็นหลัก หากเราไม่ได้ใช้ PlayerWebView เฉพาะทางของ SDK เราอาจใช้ส่วนประกอบ vanilla WebView ของ Android เพื่อแสดงหน้าเว็บ Dailymotion ทั้งหมดภายในแอปพลิเคชันของเรา
ให้เพิ่ม PlayerWebView ในเค้าโครงของเราแทน:
การกำหนดค่า Dailymotion PlayerWebView ของเรา
ตอนนี้เราได้ติดตั้งวิดเจ็ต PlayerWebView เราต้องกำหนดค่าเครื่องเล่นในคลาสกิจกรรมที่เกี่ยวข้อง
เปิด MainActivity ของคุณและเริ่มโดยการอ้างอิงไปยัง PlayerWebView:
DailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer);
จากนั้นโทรไปที่ "dailyMotionPlayer.load" และส่งรหัสวิดีโอที่เราดึงข้อมูลมาก่อนหน้านี้:
dailyMotionPlayer.load ( "x71jlg3");
สิ่งนี้ทำให้เรามีดังต่อไปนี้:
นำเข้า android.support.v7.app.AppCompatActivity; นำเข้า android.os.Bundle; นำเข้า com.dailymotion.android.player.sdk.PlayerWebView; นำเข้า java.util.HashMap; นำเข้า java.util.Map; MainActivity ระดับสาธารณะขยาย AppCompatActivity {ส่วนตัว PlayerWebView dailyMotionPlayer; @Override ที่ได้รับการป้องกันเป็นโมฆะ onCreate (บันเดิลที่บันทึกไว้InstanceState) {super.onCreate (hiddenInstanceState) setContentView (R.layout.activity_main); // ดึง PlayerWebView ของเรา // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); แผนที่ ติดตั้งโครงการของคุณบนอุปกรณ์ Android หรือเครื่องจำลองทางกายภาพและวิดีโอ Dailymotion ของคุณควรเริ่มเล่นโดยอัตโนมัติ 
การฝังวิดีโอ Vimeo
เมื่อกล่าวถึงการฝังเนื้อหาวิดีโอโดยทั่วไปคุณจะต้องการใช้ API เฉพาะแพลตฟอร์มหรือ SDK เฉพาะแพลตฟอร์มทุกที่ที่ทำได้ แต่จะเกิดอะไรขึ้นถ้าไม่มี SDK หรือ API สำหรับแพลตฟอร์มการแชร์วิดีโอที่คุณนึกไว้
ในสถานการณ์เหล่านี้คุณสามารถใช้ส่วนประกอบ WebView ของ Android เพื่อแสดงวิดีโอเป็นหน้าเว็บที่ฝังอยู่ในเค้าโครงของกิจกรรมของคุณ ในส่วนสุดท้ายนี้ฉันจะแสดงวิธีฝังวิดีโอจากแพลตฟอร์ม Vimeo ยอดนิยมโดยใช้ WebView
นอกเหนือจากการแสดงเนื้อหาวิดีโอแล้ว WebViews จะมีประโยชน์ในหลาย ๆ สถานการณ์ ตัวอย่างเช่นสมมติว่าคุณมีเนื้อหาบางอย่างที่จำเป็นต้องได้รับการอัปเดตเป็นประจำ โฮสติ้งเนื้อหานั้นออนไลน์แล้วแสดงในแอปพลิเคชันของคุณผ่าน WebView ช่วยให้คุณมีความยืดหยุ่นในการเปลี่ยนเนื้อหานั้นออนไลน์ได้ตลอดเวลาโดยไม่ต้องเผยแพร่แอปเวอร์ชันใหม่ของคุณ อย่างไรก็ตามโปรดระมัดระวังเมื่อใช้ WebViews เนื่องจากไม่รองรับคุณลักษณะหลายอย่างที่คุณคาดหวังจากเว็บเบราว์เซอร์แบบสแตนด์อโลน โดยเฉพาะอย่างยิ่ง WebViews ไม่มีแถบที่อยู่หรือตัวควบคุมการนำทางซึ่งทำให้เนื้อหาของพวกเขายากสำหรับผู้ใช้ในการโต้ตอบ
ก่อนใช้ WebView คุณควรพิจารณาว่าโซลูชันทางเลือกอื่นอาจเหมาะสมกว่าหรือไม่ตัวอย่างเช่นคุณสามารถถ่ายโอนเนื้อหาไปยังเว็บเบราว์เซอร์เริ่มต้นของอุปกรณ์หรือใช้ Chrome Custom Tabs
การอัพเดท Manifest
เนื่องจากเรากำลังสตรีมวิดีโอจากอินเทอร์เน็ตเราจำเป็นต้องเพิ่มการอนุญาตทางอินเทอร์เน็ตในรายการของเรา:
ฉันจะเปิดตัว MainActivity ในโหมดแนวนอนด้วย:
การเพิ่ม WebView ให้กับ UI ของเรา
ต่อไปให้เพิ่ม WebView ลงในแอปของเรา เราสามารถเพิ่ม WebView ลงในเค้าโครงของกิจกรรมหรือเปลี่ยนกิจกรรมทั้งหมดเป็น WebView โดยนำไปใช้ในวิธีการ onCreate () ของแอปพลิเคชันของเรา
ฉันจะเพิ่ม WebView ลงในเค้าโครงของแอปพลิเคชันของเรา:
เลือกวิดีโอของคุณ
อีกครั้งเราต้องการวิดีโอที่จะแสดง แต่คราวนี้เรากำลัง ไม่ ใช้รหัสวิดีโอ:
- ตรงไปที่ Vimeo แล้วเลือกวิดีโอที่คุณต้องการใช้ ฉันเลือกที่จะพ้นช่วงฤดูหนาวนี้
- คลิกปุ่ม“ แบ่งปัน”
- เลือกไอคอน“ ฝัง”; นี่จะให้รหัสฝังที่ควรมีหน้าตาดังนี้:
รหัสนี้ให้ข้อมูลต่อไปนี้:
- iframe ระบุว่าเรากำลังฝังหน้า HTML อื่นภายในบริบทปัจจุบัน
- src เส้นทางของวิดีโอดังนั้นแอปของคุณจะรู้ว่าจะหาวิดีโอนี้ได้จากที่ใด
- ความกว้างความสูง. ขนาดของวิดีโอ
- frameborder จะแสดงเส้นขอบรอบ ๆ เฟรมของวิดีโอหรือไม่ ค่าที่เป็นไปได้คือเส้นขอบ (1) และไม่มีขอบ (0)
- allowfullscreen สิ่งนี้ทำให้วิดีโอสามารถแสดงในโหมดเต็มหน้าจอ
ฉันจะเพิ่มรหัสฝังนี้ลงในโครงการเป็นสตริงดังนั้นคุณต้องคัดลอก / วางข้อมูลนี้ลงในเทมเพลตต่อไปนี้:
String vimeoVideo = "
ลิงค์ของคุณไปที่นี่';เฉื่อยชาเราจำเป็นต้องทำการเปลี่ยนแปลงเล็กน้อยก่อนที่รหัสฝังเข้ากันได้กับแอพ Android ของเรา อันดับแรกเราต้องเพิ่มอักขระ“ ” สองสามตัวเพื่อให้ Android Studio ไม่บ่นเกี่ยวกับการจัดรูปแบบที่ไม่ถูกต้อง:
String vimeoVideo = "
';ในที่สุดขนาดวิดีโอเริ่มต้นอาจใหญ่เกินไปสำหรับหน้าจอสมาร์ทโฟน Android บางรุ่น
ในการผลิตโดยทั่วไปคุณจะต้องทดสอบด้วยมิติต่างๆเพื่อดูว่าอะไรให้ผลลัพธ์ที่ดีที่สุดในการกำหนดค่าหน้าจอที่แตกต่างกันให้มากที่สุด อย่างไรก็ตามเพื่อช่วยให้บทความนี้ไม่สามารถควบคุมได้ฉันจะใช้สิ่งต่อไปนี้ซึ่งควรให้ผลลัพธ์ที่ดีบนหน้าจอสมาร์ทโฟน Android“ ทั่วไป” ของคุณ:
String vimeoVideo = "
';การแสดงหน้าเว็บในแอพ Android ของคุณ
ตอนนี้เราได้สร้างเลย์เอาท์ของเราและให้ HTML ของเราพร้อมใช้งานเปิด MainActivity ของคุณและให้ WebView ของเราใช้งานได้
เริ่มต้นด้วยการเพิ่มสตริง HTML:
String vimeoVideo = "
';ต่อไปเราต้องโหลดเว็บเพจด้านบนใน WebView ของเราโดยใช้วิธี loadUrl ():
webView.loadUrl (request.getUrl () toString ().);
JavaScript ถูกปิดใช้งานตามค่าเริ่มต้นดังนั้นเราจะต้องเปิดใช้งานใน WebView ของเรา
ทุกครั้งที่คุณสร้าง WebView จะมีการกำหนด WebSettings เริ่มต้นโดยอัตโนมัติ เราจะดึงข้อมูลวัตถุ WebSettings นี้โดยใช้เมธอด getSettings () จากนั้นเปิดใช้งาน JavaScript โดยใช้ setJavaScriptEnabled ()
WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (จริง);
หลังจากเพิ่มสิ่งนี้ลงใน MainActivity แล้วโค้ดของคุณควรมีลักษณะดังนี้:
นำเข้า android.support.v7.app.AppCompatActivity; นำเข้า android.os.Bundle; นำเข้า android.webkit.WebResourceRequest; นำเข้า android.webkit.WebSettings; นำเข้า android.webkit.WebView; นำเข้า android.webkit.WebViewClient; MainActivity ระดับสาธารณะขยาย AppCompatActivity {@Override โมฆะการป้องกันเป็นโมฆะ onCreate (บันเดิลที่บันทึกไว้InstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = "
"; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (WebViewClient ใหม่ใหม่) (@ บูลีนสาธารณะแบบใหม่ () ขอให้ผู้ใช้บูลีนสาธารณะ ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}ทดสอบแอป Vimeo ของคุณ
คุณรู้จักการเจาะลึกในตอนนี้: ติดตั้งโครงการนี้บนอุปกรณ์ Android จริงหรือ AVD WebView ไม่ได้ตั้งค่าให้เล่นโดยอัตโนมัติดังนั้นคุณจะต้องแตะวิดีโอเพื่อเปิดเผยการควบคุมสื่อของ Vimeo จากนั้นคุณสามารถเล่นหยุดชั่วคราวกรอถอยหลังและกรอไปข้างหน้าอย่างรวดเร็วเพื่อให้แน่ใจว่าวิดีโอทำงานได้อย่างถูกต้อง
ห่อ
ในบทความนี้ฉันได้แสดงวิธีเพิ่มวิดีโอ YouTube, Vimeo และ Dailymotion ให้กับแอพของคุณโดยใช้ API และ SDK เฉพาะแพลตฟอร์มและส่วนประกอบ WebView ของ Android ฉันยังแสดงให้คุณเห็นถึงวิธีการรวมไฟล์วิดีโอด้วยแอปพลิเคชันของคุณเพื่อให้สามารถจัดเก็บและเล่นในเครื่องได้
คุณชอบวิธีใดในการแสดงเนื้อหามัลติมีเดียแก่ผู้ใช้ของคุณ แจ้งให้เราทราบในความคิดเห็นด้านล่าง!
