videojs:通过质量选择功能批量下载/流式传输视频 [英] videojs: Download/stream video in chunks with quality selecton

问题描述

我想创建一个像youtube这样的视频流网站，我一直坚持2个要求，我不确定videojs是否可以解决.

I want to create a video streaming website, like youtube and I've been stuck on 2 requirements which I'm not sure if videojs solves or not.

1. 假设有一个1小时的视频，我希望视频以块而不是整个文件的形式下载并流式传输.我已经看到像HLS和DASH这样的流式格式可以解决此问题(在chrome的网络标签上，我看到在视频播放时下载了块).但另一方面，我认为这阻止了我的第二个要求.
2. 不同的质量选择.我正在查看 videojs-contrib-hls ，并通过查看演示和<一个href ="https://github.com/videojs/videojs-contrib-hls/blob/master/docs/bitrate-switching.md" rel ="nofollow noreferrer">自适应比特率切换文档，视频的质量是由某些政策(可以被覆盖)自动选择的，但不能由用户专门选择.

1. Say there's a 1-hour video, I want the video to be downloaded and streamed in chunks, and not the whole file. I've seen that streaming format like HLS and DASH, solves that (looking on the network tab of chrome, I see chunks downloaded as the video plays). But on the other hand, I think it prevents my 2nd requirement.
2. Different quality selection. I was looking into videojs-contrib-hls and saw and by looking in the demo and the adaptive bitrate switching documentation, it seems that the quality of the video is chosen automatically by some policy (which can be overridden), but cannot be chosen specifically by the user.

我想知道我是否理解不正确?浏览器足够聪明，可以自己满足我的第一个要求吗?

I was wondering if maybe I'm not understanding things correctly? Are browsers smart enough to achieve my 1st requirement on their own?

推荐答案

您可以通过以下方式满足您的第二个要求.

You can fulfill your 2nd requirement by following way.

   //initilaize your player 
   var player = videojs(element_id);

    player.ready(function () {        
        player.src({
            src: hls_url,
            type: 'application/x-mpegURL'
        });
        player.play();
    });

    player.on('loadedmetadata', function () {
        var _hls = player.hls;

        //get quality list
        var  quality_list = _hls.representations();  //load it to your custom dropdown

        //you can change quality using below (it will select quality greater than 720)
        _hls.representations().forEach(function (rep) {

       //you can change the condition as per your dropdown selection

            if (rep.width > 720) {
                rep.enabled(true);  //select this quality
            } else {
                rep.enabled(false);  //disable this quality
            }
        });

    })

这篇关于videojs:通过质量选择功能批量下载/流式传输视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！