Hướng dẫn cài plugin cho Visual Studio Code hỗ trợ lập trình React Native

Để hỗ trợ lập trình React Native bằng VS Code, bạn có thể cài các plugin sau để hỗ trợ quá trình lập trình đỡ mệt hơn rất nhiều:

    1. React Native Tools
    2. Babel JavaScript
      Hiển thị code màu mè cho dễ nhìn
  1. Flow Language Support (Cài thêm Flow)
    Hỗ trợ check lỗi cũ pháp, đọc thêm ở đây
  2. ESLint (Cài thêm ESLint)
    Gợi ý code gọn hơn Ví dụ
  3. Prettier — JavaScript formatter
    Các plugin trên khá dễ hiểu, nhưng bạn nên đọc kỹ document kèm theo để thiết lập chúng đúng cách.

Để cài đặt nhanh gọn các plugin trên, các bạn có thể tải về VSCode Extension Pack 

Read More →
Replies: 0 / Share:

Hướng dẫn sử dụng Plyr phát Audio, Video

Trong quá trình làm website nghe Radio Online, mình gặp khó khăn khi không tìm được player hỗ trợ định dạng HLS (M3U8), các player miễn phí trên mạng như jPlayer, Muses chỉ hỗ trợ MP3, AAC, OGG. Mình có thử sử dụng player của Wowza nhưng từ 31/8/2021 nó chấm dứt hỗ trợ. Rất may là tìm được Plyr, nó hỗ trợ play tốt các link M3U8, trên mạng thấy ít bài viết về player Plyr, nên tiện làm mình dịch những chỗ cần thiết từ Document của Plyr cho ai cần tham khảo. Ok bắt đầu nhé.

Sơ qua về Plyr

Plyr là một trình phát đa phương tiện HTML5, hỗ trợ cả audio và video. Plyr có cấu trúc code đơn giản, nhẹ, có khả năng tùy biến cao, hỗ trợ hầu hết các trình duyệt hiện tại như Chrome, Firefox, Safari, Edge.

Tính năng

  • 📼 HTML Video & Audio, YouTube & Vimeo – Hỗ trợ nhiều nguồn đầu vào.
  • 📖 Accessible – Hỗ trợ hiển thị đa phụ đề.
  • 🔧 Customizable – Có khả năng tùy biến giao diện player theo ý thích.
  • 😎 Clean HTML – Code dễ hiểu.
  • 📱 Responsive – Kích thước thích ứng với màn hình.
  • 💵 Monetization – Hỗ trợ kiếm tiền từ video.
  • 📹 Streaming – Hỗ trợ streaming qua giao thức hls.js, Shaka và dash.js (Cái này ít có player free nào hỗ trợ).
  • 🎛 API – Hỗ trợ điều khiển qua API một số chức năng như tua, điều chỉnh âm lượng, tìm kiếm.
  • 🔎 Fullscreen – Hỗ trợ hiển thị full màn hình
  • ⌨️ Shortcuts – Hỗ trợ phím tắt
  • 🖥 Picture-in-Picture – Hỗ trợ tính năng Picture-in-Picture (Video thu nhỏ xuống góc khi chuyển qua ứng dụng khác)
  • 🏎 Speed controls – Hỗ trợ thay đổi tốc độ phát
  • 👌 Preview thumbnails – Hỗ trợ hiển thị ảnh đại diện
  • 🤟 No frameworks – được viết bằng “vanilla” ES6 JavaScript, không yêu cầu jQuery.

Read More →
Replies: 0 / Share: