Phát PiP

Ở trang này, bạn sẽ chọn một file để chạy trong nền bằng file của bạn thay vì đăng lên cloud chỉ để phát thứ gì đó trên tệp

*

Ảnh

Kiểm tra

*

*

Stream device

Kiểm tra

*

*

Video

Kiểm tra

*

*

Nhạc ( chỉ chấp nhận mp3 )

Kiểm tra

*

Code

Ảnh

Đối với ảnh thì bạn có thể nhập từ input, phải có id xem ảnh thì mới hiển thị được ảnh muốn nhập trong javaScript

<input type="file" id="imagei" accept="image/*">
<img id="Viima" src="#" />
<script>
const Inimg = document.getElementById('imagei');
const Viimage = document.getElementById('Viima');

Inimg.addEventListener('change', event => {
const Filea = Inimg.files[0];
const Ufilea = URL.createObjectURL(Filea);
Viimage.src = Ufilea;
});
</script>

Nếu bạn biết về style thì chỉnh lại kích cỡ ảnh

Video

Đối với video thì bạn có thể nhập từ input, phải có id xem video thì mới hiển thị được ảnh muốn nhập trong javaScript

<input type="file" id="videoi" accept="video/*">
<video id="Vivi">
</video>
<script>
const Invideo = document.getElementById('videoi');
const Vivideo = document.getElementById('Vivi');

Invideo.addEventListener('change', event => {
const Fileb = Invideo.files[0];
const Ufileb = URL.createObjectURL(Fileb);
Vivideo.src = Ufileb;
Vivideo.load();
});
</script>

Nếu bạn biết về style thì chỉnh lại kích cỡ video để tránh kích cỡ video to

Âm thanh

Đối với Nhạc thì bạn có thể nhập từ input, phải có id xem audio thì mới hiển thị được ảnh muốn nhập trong javaScript

<input type="file" id="mui" accept="audio/*">
<audio id="Viau">
</audio>
<script>
const Inaudio = document.getElementById('mui');
const Viaudio = document.getElementById('Viau');

Inaudio.addEventListener('change', event => {
const Filec = Inaudio.files[0];
const Ufilec = URL.createObjectURL(Filec);
Viaudio.src = Ufilec;
Viaudio.load();
});
</script>

Phát camera Trực tiếp

Riêng stream device này cần nút phát và dừng, vẫn có id xem video để có thể xem camera đang phát

<button id="stream">Phát</button>
<button id="sstream"><Dừng</button>
</video>
<script>
const Sstream = document.getElementById('sstream');
const Stream = document.getElementById('stream');
const Vivideos = document.getElementById('Vivis');

let currentStream;

Stream.addEventListener('click', event => {
navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    currentStream = stream;
    Vivideos.srcObject = stream;
  })
  .catch((error) => {
    // Xử lý lỗi nếu không thể truy cập camera
    console.error('Lỗi khi truy cập vào camera:', error);
  });
});
Sstream.addEventListener('click', event => {
let tracks = currentStream.getTracks(); 

        tracks.forEach(track => {
            track.stop(); 
        });

        Vivideos.srcObject = null;
});
</script>

Quay về trang chủ: Đi