วิธีสร้าง Video Media Player โดยใช้ Python
การสร้างเครื่องเล่นวิดีโอสามารถช่วยให้คุณเพลิดเพลินกับวิดีโอโปรดในธีมและสไตล์ที่กำหนดเองได้ คุณสามารถทำให้การเล่นวิดีโอราบรื่นขึ้น ออกแบบปุ่มและเมนูของแอป และเพิ่มฟังก์ชันการทำงานอะไรก็ได้ที่คุณต้องการ
การดำเนินการในปัจจุบันจะสร้างความคุ้นเคยในทางปฏิบัติกับการพัฒนาแอปพลิเคชันเดสก์ท็อปข้ามแพลตฟอร์ม ตลอดจนความเชี่ยวชาญในการประมวลผลเนื้อหามัลติมีเดียและการจัดการการโต้ตอบของผู้ใช้ผ่านการจัดการเหตุการณ์ โครงการนี้เปิดโอกาสให้สร้างเครื่องเล่นสื่อวิดีโอที่ใช้งานได้โดยใช้ Tkinter, VLC และโมดูลวันที่และเวลา
โมดูล Tkinter, VLC และ Datetime
Tkinter เป็นสภาพแวดล้อมการพัฒนาแบบรวม (IDE) สำหรับสร้างส่วนติดต่อผู้ใช้แบบกราฟิก (GUI) ใน Python ด้วยวิดเจ็ตในตัวที่หลากหลาย เช่น ปุ่ม ป้ายกำกับ และกล่องข้อความ นักพัฒนาสามารถสร้างแอปพลิเคชันที่ซับซ้อน รวมถึงแต่ไม่จำกัดเพียงอินเทอร์เฟซปฏิทินพื้นฐาน เครื่องคิดเลข หรือแม้แต่ระบบจัดการงาน ในการตั้งค่า Tkinter บนคอมพิวเตอร์ของคุณ เพียงเปิดพรอมต์คำสั่งแล้วป้อนคำสั่งการติดตั้ง
pip install tkinter
โมดูล python-vlc เป็นอินเทอร์เฟซที่อำนวยความสะดวกในการสื่อสารระหว่างแอปพลิเคชัน Python และไลบรารีเครื่องเล่นสื่อ VLC สิ่งนี้ช่วยให้นักพัฒนาสามารถควบคุมศักยภาพของชุดคุณลักษณะที่กว้างขวางของ VLC ในโครงการของพวกเขาได้อย่างเต็มที่โดยการรวมเข้ากับโค้ดเบสของพวกเขา ในการรับแพ็คเกจ python-vlc ให้รันคำสั่งต่อไปนี้:
pip install python-vlc
โมดูล datetime ใน Python มีคลาสและฟังก์ชันมากมายที่ช่วยให้ผู้ใช้สามารถทำงานกับรูปแบบวันที่และเวลาต่างๆ รวมถึงดำเนินการเกี่ยวกับเขตเวลา คุณลักษณะนี้ช่วยให้สามารถจัดการและคำนวณข้อมูลชั่วคราวภายในโปรแกรม Python ได้อย่างมีประสิทธิภาพ
การสร้างโครงสร้างของ Video Media Player
ซอร์สโค้ดสำหรับโปรเจ็กต์นี้มีอยู่ในที่เก็บ GitHub ซึ่งสามารถเข้าถึงได้โดยไปที่ URL ที่เกี่ยวข้อง
ในการดำเนินการตามวิสัยทัศน์ของเราสำหรับโปรแกรมเล่นสื่อที่ใช้งานง่ายและดึงดูดสายตา ก่อนอื่นเราต้องนำเข้าโมดูลที่จำเป็นซึ่งจะทำให้เราสามารถสร้างประสบการณ์ดังกล่าวได้ โดยเฉพาะอย่างยิ่ง เราจะกำหนดคลาสใหม่ที่เรียกว่า MediaPlayerApp ซึ่งจะทำหน้าที่เป็นพื้นฐานสำหรับอินเทอร์เฟซผู้ใช้ของแอปพลิเคชันของเรา เมื่อกำหนดแล้ว เราจะเรียกใช้เมธอดตัวสร้างเพื่อตั้งค่าสถานะเริ่มต้นของหน้าต่างแอปพลิเคชันหลัก รวมถึงการตั้งชื่อเรื่อง การกำหนดขนาด และการระบุสีพื้นหลังของเครื่องเล่นสื่อวิดีโอ สุดท้าย เราจะดำเนินการเรียกเมธอด ` initialize_player’เพื่อให้แน่ใจว่าคอมโพเนนต์ทั้งหมดได้รับการเริ่มต้นอย่างถูกต้องก่อนที่จะมีการโต้ตอบใดๆ เกิดขึ้น
import tkinter as tk
import vlc
from tkinter import filedialog
from datetime import timedelta
class MediaPlayerApp(tk.Tk):
def __init__(self):
super().__init__()
self.title("Media Player")
self.geometry("800x600")
self.configure(bg="#f0f0f0")
self.initialize_player()
ฟังก์ชัน initializer\_player() มีหน้าที่ในการตั้งค่าเครื่องเล่นสื่อโดยการสร้างอินสแตนซ์ของไลบรารีเครื่องเล่นสื่อ VLC ซึ่งมีฟังก์ชันการทำงานที่หลากหลายสำหรับจัดการการเล่นเสียงและวิดีโอ ฟังก์ชันนี้ยังสร้างวัตถุ QMediaPlayer ใหม่ ซึ่งทำหน้าที่เป็นองค์ประกอบส่วนติดต่อผู้ใช้สำหรับควบคุมการเล่นสื่อ เพื่อรักษาบันทึกของไฟล์วิดีโอที่กำลังเล่นอยู่ ตัวแปรชื่อ current\_file จะถูกนำมาใช้ ตัวแปรนี้จะใช้ในขั้นตอนต่อๆ ไปเพื่อให้แน่ใจว่าการเปลี่ยนระหว่างวิดีโอต่างๆ ระหว่างการเล่นเกมเป็นไปอย่างราบรื่น นอกจากนี้ ฟังก์ชันจะตั้งค่าสถานะการเล่นเป็น’หยุด’ในขั้นต้น ทำให้ผู้ใช้สามารถเริ่มเล่นใหม่ตั้งแต่ต้นเมื่อต้องการ สุดท้าย มีการเรียกใช้เมธอด create\_widgets() เพื่อตั้งค่าองค์ประกอบส่วนติดต่อผู้ใช้แบบกราฟิกที่สอดคล้องกับแต่ละปุ่มบนอุปกรณ์ควบคุมระยะไกล
def initialize_player(self):
self.instance = vlc.Instance()
self.media_player = self.instance.media_player_new()
self.current_file = None
self.playing_video = False
self.video_paused = False
self.create_widgets()
สร้างวิดเจ็ตผ้าใบโดยใช้องค์ประกอบหลักที่ระบุและตั้งค่าคุณสมบัติ เช่น การวางตำแหน่งบนหน้าจอโดยใช้ สถานที่ การกำหนดขนาด เช่น ความกว้างและความสูง พร้อมกับการใช้ตัวระบุเฉพาะสำหรับการอ้างอิง นอกจากนี้ สร้างปุ่มเลือกไฟล์ผ่านการสร้างอินสแตนซ์ ตั้งค่าแอตทริบิวต์รวมถึงองค์ประกอบหลัก ป้ายข้อความที่จะแสดง กำหนดรูปแบบพารามิเตอร์สำหรับลักษณะที่ปรากฏ และการดำเนินการที่กำหนดซึ่งดำเนินการตามการโต้ตอบของผู้ใช้ซึ่งคลิกปุ่ม
ตรวจสอบให้แน่ใจว่าสร้างป้ายกำกับที่เหมาะสมสำหรับการแสดงทั้งเวลาปัจจุบันและระยะเวลาทั้งหมดของวิดีโอ ขณะตั้งค่าองค์ประกอบหลัก ปรับรูปแบบข้อความ กำหนดสีแบบอักษร และกำหนดสีพื้นหลัง นอกจากนี้ ให้สร้างพื้นที่ที่มีขอบด้วยเฉดสีพื้นหลังเฉพาะเพื่อควบคุมความคืบหน้าของการเล่นวิดีโอ
def create_widgets(self):
self.media_canvas = tk.Canvas(self, bg="black", width=800, height=400)
self.media_canvas.pack(pady=10, fill=tk.BOTH, expand=True)
self.select_file_button = tk.Button(
self,
text="Select File",
font=("Arial", 12, "bold"),
command=self.select_file,
)
self.select_file_button.pack(pady=5)
self.time_label = tk.Label(
self,
text="00:00:00/00:00:00",
font=("Arial", 12, "bold"),
fg="#555555",
bg="#f0f0f0",
)
self.time_label.pack(pady=5)
self.control_buttons_frame = tk.Frame(self, bg="#f0f0f0")
self.control_buttons_frame.pack(pady=5)
รวมการทำงานของการกำหนดปุ่มเล่น หยุดชั่วคราว หยุด กรอไปข้างหน้า ย้อนกลับ พร้อมกับการสร้างวิดเจ็ตแถบความคืบหน้าของวิดีโอภายในแอปพลิเคชันเครื่องเล่นวิดีโอ HTML5 นอกจากนี้ ให้ระบุพาเรนต์คอนเทนเนอร์ที่ต้องการสำหรับการวางองค์ประกอบเหล่านี้ ตลอดจนวิธีการที่กำหนดในการอัปเดตตำแหน่งการเล่นวิดีโอ สีพื้นหลังที่ต้องการสำหรับแถบความคืบหน้า และความหนาที่สอดคล้องกัน
ตรวจสอบให้แน่ใจว่าส่วนประกอบทั้งหมดเหล่านี้ได้รับการจัดวางอย่างกลมกลืน โดยมีระยะห่างที่เพียงพอในด้านใดด้านหนึ่ง
self.play_button = tk.Button(
self.control_buttons_frame,
text="Play",
font=("Arial", 12, "bold"),
bg="#4CAF50",
fg="white",
command=self.play_video,
)
self.play_button.pack(side=tk.LEFT, padx=5, pady=5)
self.pause_button = tk.Button(
self.control_buttons_frame,
text="Pause",
font=("Arial", 12, "bold"),
bg="#FF9800",
fg="white",
command=self.pause_video,
)
self.pause_button.pack(side=tk.LEFT, padx=10, pady=5)
self.stop_button = tk.Button(
self.control_buttons_frame,
text="Stop",
font=("Arial", 12, "bold"),
bg="#F44336",
fg="white",
command=self.stop,
)
self.stop_button.pack(side=tk.LEFT, pady=5)
self.fast_forward_button = tk.Button(
self.control_buttons_frame,
text="Fast Forward",
font=("Arial", 12, "bold"),
bg="#2196F3",
fg="white",
command=self.fast_forward,
)
self.fast_forward_button.pack(side=tk.LEFT, padx=10, pady=5)
self.rewind_button = tk.Button(
self.control_buttons_frame,
text="Rewind",
font=("Arial", 12, "bold"),
bg="#2196F3",
fg="white",
command=self.rewind,
)
self.rewind_button.pack(side=tk.LEFT, pady=5)
self.progress_bar = VideoProgressBar(
self, self.set_video_position, bg="#e0e0e0", highlightthickness=0
)
self.progress_bar.pack(fill=tk.X, padx=10, pady=5)
สร้างฟังก์ชันการทำงานของ Video Media Player
รวมข้อมูลโค้ดด้านล่างเพื่อกำหนดเมธอด select\_file ที่เปิดกล่องโต้ตอบไฟล์เพื่อให้ผู้ใช้เลือกไฟล์วิดีโอ MP4 หรือ AVI จากนั้นเมธอดจะใช้ระยะเวลาของไฟล์ที่เลือกเพื่ออัปเดตการแสดงไทม์ไลน์และเริ่มเล่นสื่อที่เลือก
def select_file(self):
file_path = filedialog.askopenfilename(
filetypes=[("Media Files", "*.mp4 *.avi")]
)
if file_path:
self.current_file = file_path
self.time_label.config(text="00:00:00/" \+ self.get_duration_str())
self.play_video()
เพื่อกำหนดระยะเวลารวมของวิดีโอ ฉันเสนอให้ใช้ฟังก์ชันใหม่ชื่อ get\_duration\_str ซึ่งจะคำนวณค่านี้โดยพิจารณาว่าแอปพลิเคชันกำลังเล่นวิดีโออยู่หรือไม่ หากแอปพลิเคชันกำลังเล่นวิดีโออยู่ เราสามารถเรียกระยะเวลาเป็นมิลลิวินาทีแล้วแปลงเป็นรูปแบบเวลามาตรฐานซึ่งประกอบด้วยชั่วโมง นาที และวินาที (HH:MM:SS) ในทางกลับกัน หากไม่มีการเล่นวิดีโอ เราควรตั้งค่าเริ่มต้นสำหรับ get\_duration\_str เป็น 00:00:00
def get_duration_str(self):
if self.playing_video:
total_duration = self.media_player.get_length()
total_duration_str = str(timedelta(milliseconds=total_duration))[:-3]
return total_duration_str
return "00:00:00"
กำหนดวิธีการที่เรียกว่า “play\_video” ซึ่งจะตรวจสอบว่าวิดีโอกำลังเล่นอยู่บนผืนผ้าใบหรือไม่ หากไม่มีวิดีโอกำลังเล่นอยู่ ให้สร้างออบเจกต์สื่อใหม่โดยระบุพาธของไฟล์ในตัวแปร “selected\_file\_path” จากนั้น เชื่อมโยงวัตถุสื่อนี้กับอินสแตนซ์ผ้าใบที่สร้างไว้ก่อนหน้านี้ และเริ่มเล่นวิดีโอ สุดท้าย อัปเดตค่าของสถานะ"กำลังเล่น\_วิดีโอ"เพื่อระบุว่าวิดีโอได้เริ่มเล่นแล้ว
def play_video(self):
if not self.playing_video:
media = self.instance.media_new(self.current_file)
self.media_player.set_media(media)
self.media_player.set_hwnd(self.media_canvas.winfo_id())
self.media_player.play()
self.playing_video = True
ในการใช้ฟังก์ชันกรอไปข้างหน้าสำหรับเครื่องเล่นวิดีโอใน Python เราสามารถสร้างสองวิธี-fast\_forward และ rewind แบบแรกจะเพิ่มเวลาเล่นปัจจุบันโดยเพิ่ม 10,000 มิลลิวินาทีเข้าไป ในขณะที่แบบหลังจะลดเวลาการเล่นโดยการลบจำนวนที่เท่ากันออก
def fast_forward(self):
if self.playing_video:
current_time = self.media_player.get_time() \+ 10000
self.media_player.set_time(current_time)
def rewind(self):
if self.playing_video:
current_time = self.media_player.get_time() - 10000
self.media_player.set_time(current_time)
รวมฟังก์ชันการหยุดชั่วคราวและเล่นวิดีโอไว้ในอินเทอร์เฟซของแอปพลิเคชันของคุณโดยใช้วิธีที่เรียกว่า"pause\_video"วิธีนี้จะรับผิดชอบในการจัดการการโต้ตอบของผู้ใช้ที่เกี่ยวข้องกับการเล่นวิดีโอ ขั้นตอนแรกคือการตรวจสอบว่าวิดีโอถูกหยุดชั่วคราวหรือไม่ หากวิดีโอกำลังดำเนินการอยู่และหยุดลงชั่วคราว ให้เรียกวิธี"เล่น"เพื่อดำเนินการต่อจากจุดที่ค้างไว้ ในทางกลับกัน หากวิดีโอไม่เคยเริ่มหรือหยุดมาก่อน ควรเรียกใช้เมธอด"หยุดชั่วคราว"พร้อมกับอัปเดตอินเทอร์เฟซผู้ใช้ที่เหมาะสมซึ่งแสดงถึงการกระทำนี้
def pause_video(self):
if self.playing_video:
if self.video_paused:
self.media_player.play()
self.video_paused = False
self.pause_button.config(text="Pause")
else:
self.media_player.pause()
self.video_paused = True
self.pause_button.config(text="Resume")
เพื่อสื่อสารข้อความที่ได้รับอย่างมีประสิทธิภาพในลักษณะที่ละเอียดยิ่งขึ้น ฉันขอแนะนำให้ใช้ถ้อยคำใหม่ดังนี้:> “เพื่อจัดการการเล่นวิดีโออย่างมีประสิทธิภาพ ให้ใช้สองวิธีในโค้ดของคุณ คำสั่งแรก"หยุด"จะหยุดการเล่นวิดีโอที่กำลังดำเนินอยู่และรีเซ็ตการประทับเวลาที่เกี่ยวข้อง ส่วนที่สอง’set\_video\_position’จะกำหนดว่าวิดีโอกำลังเล่นอยู่หรือไม่ ในกรณีนี้ ระบบจะคำนวณตำแหน่งที่ต้องการเป็นมิลลิวินาทีตามระยะเวลารวมของวิดีโอและตั้งเวลาเล่นตามนั้น
def stop(self):
if self.playing_video:
self.media_player.stop()
self.playing_video = False
self.time_label.config(text="00:00:00/" \+ self.get_duration_str())
def set_video_position(self, value):
if self.playing_video:
total_duration = self.media_player.get_length()
position = int((float(value) / 100) * total_duration)
self.media_player.set_time(position)
เพื่อให้ถ่ายทอดข้อมูลที่ต้องการได้อย่างมีประสิทธิภาพโดยยังคงไว้ซึ่งน้ำเสียงที่เป็นมืออาชีพ ฉันขอแนะนำให้เปลี่ยนข้อความใหม่ดังนี้:javascriptfunction updateVideoProgress() {//ตรวจสอบว่าวิดีโอกำลังเล่นอยู่หรือไม่หาก (กำลังเล่นอยู่) {//ดึงระยะเวลาทั้งหมดของ วิดีโอในหน่วยวินาทีconst totalDuration=getTotalDuration();//คำนวณเปอร์เซ็นต์ความคืบหน้าตามค่าที่เรียกมาlet progressPercentage=((getCurrentTime()/totalDuration) * 100).toFixed(2);//อัปเดตแถบความคืบหน้าด้วยค่าที่คำนวณได้updateProgressBar( progressPercentage + “%”);//จัดรูปแบบเวลาปัจจุบันและระยะเวลาทั้งหมดเพื่อวัตถุประสงค์ในการแสดงผลconst formattedCurrentTime=
หากต้องการใช้วิธีนี้ซ้ำๆ ทุกๆ 1,000 มิลลิวินาที จึงสร้างลูปไม่สิ้นสุดที่อัปเดตความคืบหน้าและป้ายกำกับเวลาของวิดีโออย่างต่อเนื่องระหว่างการเล่น โปรดกำหนดเวลาการดำเนินการดังต่อไปนี้:
def update_video_progress(self):
if self.playing_video:
total_duration = self.media_player.get_length()
current_time = self.media_player.get_time()
progress_percentage = (current_time/total_duration) * 100
self.progress_bar.set(progress_percentage)
current_time_str = str(timedelta(milliseconds=current_time))[:-3]
total_duration_str = str(timedelta(milliseconds=total_duration))[:-3]
self.time_label.config(text=f"{current_time_str}/{total_duration_str}")
self.after(1000, self.update_video_progress)
แน่นอน! นี่คือความพยายามของฉันในการถอดความคำแนะนำในภาษาที่เป็นทางการมากขึ้น:pythonclass VideoProgressBar(tk.Scale):def init (self, master=None, **kwargs):super() init (master, **kwargs)# ตั้งค่าสถานะเริ่มต้นและพฤติกรรมของความคืบหน้า barself[‘orient’]=‘horizontal’self[’tickinterval’]=-1self[‘command’]=Noneself[‘showgrid’]=Falseself[‘showlabel’]=Trueself[‘sliderrelief’]=‘groove’self[‘start’]=0self[’end’]=100# ตั้งค่าตัวเลือก showvalue เป็น False เพื่อหลีกเลี่ยงการแสดง
เริ่มต้นการกำหนดค่าเริ่มต้นของแถบความคืบหน้าโดยระบุช่วงตั้งแต่ 0 ถึง 100 ตั้งค่าการวางแนว กำหนดความยาว และใช้การปรับแต่งกับแถบความคืบหน้า นอกจากนี้ ผูกตัวฟังเหตุการณ์เข้ากับแถบความคืบหน้าเพื่อให้เมื่อมีการโต้ตอบกับผู้ใช้ มันจะทริกเกอร์เมธอด on\_click ที่ระบุสำหรับจัดการการประมวลผลเพิ่มเติม
class VideoProgressBar(tk.Scale):
def __init__(self, master, command, **kwargs):
kwargs["showvalue"] = False
super().__init__(
master,
from_=0,
to=100,
orient=tk.HORIZONTAL,
length=800,
command=command,
**kwargs,
)
self.bind("<Button-1>", self.on_click)
รวมการทำงานของตัวจัดการเหตุการณ์"on\_click"โดยนำไปใช้ภายใน codebase เป้าหมายคือการระบุว่าแถบความคืบหน้าเปิดใช้งานสำหรับการโต้ตอบหรือไม่ จากนั้นคำนวณค่าที่อัปเดตสำหรับแถบความคืบหน้าตามตำแหน่งที่ผู้ใช้คลิก สุดท้าย อัปเดตค่าที่แสดงของแถบความคืบหน้าด้วยค่าที่คำนวณใหม่นี้
def on_click(self, event):
if self.cget("state") == tk.NORMAL:
value = (event.x/self.winfo_width()) * 100
self.set(value)
โปรดสร้างอินสแตนซ์ใหม่ของคลาส MediaPlayerApp และเรียกใช้เมธอด update\_video\_progress()'ภายในบริบทของ Tkinter GUI นอกจากนี้ ตรวจสอบให้แน่ใจว่ามีการเรียกใช้ฟังก์ชัน mainloop()‘เพื่อเริ่มต้นการวนรอบเหตุการณ์และยังคงทำงานจนกว่าผู้ใช้จะปิดหน้าต่าง
if __name__ == "__main__":
app = MediaPlayerApp()
app.update_video_progress()
app.mainloop()
ทดสอบคุณสมบัติต่างๆ ของ Video Media Player
เมื่อเรียกใช้แอปพลิเคชัน อินเทอร์เฟซสื่อวิดีโอจะปรากฏขึ้นพร้อมตัวเลือก"เลือกไฟล์"ในตัว พร้อมด้วยชุดการควบคุมที่เป็นมิตรกับผู้ใช้ เช่น ตัวระบุเวลา เครื่องมือจัดการการเล่น และการแสดงภาพความคืบหน้าของวิดีโอ ทั้งหมดนี้รวมอยู่ในภาพ กรอบที่น่าสนใจ
เมื่อเลือกวิดีโอแล้ว วิดีโอจะเริ่มเล่นตั้งแต่เริ่มต้น โดยปรับทั้งการประทับเวลาเริ่มต้นและป้ายกำกับระยะเวลาพร้อมกันเพื่อให้สะท้อนถึงเวลาที่ผ่านไป
เมื่อกดปุ่ม"หยุดชั่วคราว"สื่อภาพจะถูกระงับในขณะที่เปลี่ยนไปยังตัวเลือก"ดำเนินการต่อ"เมื่อเลือกคุณสมบัติ"กรอไปข้างหน้า"การนำเสนอภาพและเสียงจะเลื่อนไปสิบวินาที
ในทำนองเดียวกัน เมื่อกดปุ่ม"ย้อนกลับ"วิดีโอจะย้อนกลับสิบวินาที ปุ่ม “หยุด” จะยุติการเล่นวิดีโอโดยสมบูรณ์ ผู้ใช้สามารถปรับแต่งแถบความคืบหน้าเพื่อนำทางไปยังจุดเฉพาะภายในวิดีโอได้ ขณะที่แถบแสดงความคืบหน้าเลื่อนไปตามความยาว เวลาที่แสดงจะสะท้อนถึงระยะเวลาที่ผ่านไปตั้งแต่เริ่มวิดีโอ
การปรับปรุงแอปพลิเคชัน Video Media Player
เพื่อปรับปรุงการทำงานของเครื่องเล่นสื่อวิดีโอนี้ คุณอาจต้องการรวมคุณลักษณะที่ช่วยให้ผู้ใช้สามารถเข้าถึงและแสดงตัวเลือกคำบรรยาย นอกจากนี้ การปรับปรุงที่เป็นไปได้อื่นๆ อาจเกี่ยวข้องกับการปรับขนาดหน้าจอ การควบคุมระดับเสียง และการทำซ้ำบางส่วนของวิดีโอ
ในการรวมเอาความสามารถเหล่านั้นเข้าไว้ด้วยกัน เราอาจเจาะลึกเข้าไปในขอบเขตของไลบรารี Pygame Pygame เป็นเครื่องมือที่ปรับเปลี่ยนได้สูงและใช้งานง่าย ซึ่งรวมเข้ากับ Tkinter ได้อย่างลงตัว แพ็คเกจที่ชาญฉลาดนี้นำเสนอโอกาสในการกำหนดค่าส่วนบุคคล แสดงอาร์เรย์ขององค์ประกอบเชิงโต้ตอบ และทำงานได้อย่างไร้ที่ติในทุกแพลตฟอร์ม