如何優化網頁視頻載入速度來提高用戶體驗？

一、選擇合適的視頻格式

視頻格式直接決定了網頁視頻的載入速度和用戶體驗。目前最流行的視頻格式是MP4和WebM，它們的優點和缺點如下：

1、MP4格式：壓縮率高，畫質優秀，但是文件相對較大，導致載入速度較慢。

2、WebM格式：文件相對較小，載入速度相對較快，但是其壓縮率相對較低，畫質一般。

因此，根據實際情況選擇合適的視頻格式，平衡畫質與載入速度。

    <video src="example.mp4" type="video/mp4"></video>
    <video src="example.webm" type="video/webm"></video>

二、壓縮視頻文件大小

壓縮視頻文件大小可以有效提高視頻載入速度。以下是幾種常見的壓縮方式：

1、壓縮解析度：將視頻的解析度降低，可以有效減小視頻文件大小，但是會降低畫質。

2、壓縮比特率：將視頻的比特率降低，可以減小文件大小，但也會導致畫質下降。

3、刪除無用信息：視頻中有許多無用的信息，例如片頭片尾、片段重複等等，刪除這些信息可以減小文件大小。

    <video src="example.mp4" type="video/mp4" controls width="640" height="360"></video>

三、使用視頻預載入

使用視頻預載入可以有效縮短視頻載入時間，提高用戶體驗。以下是幾種視頻預載入方式：

1、使用autoplay屬性：當autoplay屬性被設置為true時，視頻會在頁面載入後自動播放，這樣可以預載入視頻，縮短延遲時間。

2、使用preload屬性：preload屬性可以讓頁面在載入時預先緩存視頻文件，這樣可以提高用戶觀看速度。

    <video src="example.mp4" type="video/mp4" controls width="640" height="360" preload="auto"></video>

四、使用視頻CDN加速

使用視頻CDN可以將視頻分發到全球各地的伺服器，讓用戶從最近的伺服器載入，減少視頻載入時間，提高用戶體驗。

以下是使用七牛雲CDN載入視頻的代碼示例：

    <script src="http://cdn.staticfile.org/plupload/2.1.1/plupload.full.min.js"></script>
    <script src="http://cdn.staticfile.org/qiniu-js/1.0.19-beta/qiniu.min.js"></script>
    <video id="video" src="" type="video/mp4" controls width="640" height="360"></video>
    <script>
        var videoUrl = 'http://example.com/video.mp4';
        var config = {
            useCdnDomain: true,
            disableStatisticsReport: true,
            retryCount: 6,
            region: 'z2'
        };
        var observer = {
            next: function(result) {
                var percent = result.total.percent;
                console.log('視頻載入中，請稍候... ' + percent + '%');
            },
            error: function(err) {
                alert(err.message);
            },
            complete: function(result) {
                var video = document.getElementById('video');
                video.src = result.key;
                video.load();
                console.log('視頻載入完成！');
            }
        };
        var putExtra = {};
        var qiniuUpload = function(videoUrl) {
            var observable = qiniu.upload(videoUrl, null, token, putExtra, config);
            var subscription = observable.subscribe(observer);
        };
        var xhr = new XMLHttpRequest();
        xhr.open('GET', videoUrl, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
            if (xhr.status === 200) {
                var blob = xhr.response;
                var token = '';
                // TODO: 獲取七牛雲的token
                qiniuUpload(blob, token);
            }
        };
        xhr.onerror = function() {
            alert('視頻載入失敗！');
        };
        xhr.send();
    </script>