HTML5 - 如何流式传输大型.mp4文件？

Video.js是一个开源的HTML5视频播放器，支持多种视频格式播放，包括大型.mp4文件。可以通过引用videojs.min.js文件来使用。

```html

<script src="//vjs.zencdn.net/7.11.4/video.min.js"></script>

```

然后在HTML中添加一个Video元素：

```html

<video id="my-video" width="640" height="360" controls>

    <source src="your-video-file.mp4" type="video/mp4">

    Your browser does not support HTML5 video.

</video>

```

MediaSource和SourceBuffer是Web Audio和Video API中用于处理媒体数据的两个对象。通过使用MediaSource将.mp4文件作为源，然后使用SourceBuffer来处理媒体数据，可以实现对流式传输大型.mp4文件的控制。

```javascript

const mediaSource = new MediaSource();

const video = document.querySelector('video');

mediaSource.addEventListener('sourceopen', (event) => {

    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

    sourceBuffer.addEventListener('updateend', () => {

        if (sourceBuffer.updating) {

            sourceBuffer.removeEventListener('updateend', this.handleSourceBufferUpdateEnd);

            sourceBuffer.update();

        }

    });

});

```

WebRTC是一种实现实时通信的开放标准技术，支持点对点、点对多点和多方会议。可以使用WebRTC的API和MediaStream API来实现对流式传输大型.mp4文件的控制。

```javascript

const constraints = {

    audio: true,

    video: true

};

navigator.mediaDevices.getUserMedia(constraints)

    .then(stream => {

        const videoTrack = stream.getVideoTracks()[0];

        const videoElement = document.querySelector('video');

        videoElement.srcObject = new MediaStream([videoTrack]);

        videoElement.play();

    })

    .catch(error => {

        console.log('getUserMedia error:', error);

    });

```