Question

我正在尝试使用videojs在多个视频标签上运行视频，但没有结果。我收到错误people我根据他们通过基于REST的调用收到的ID，为每个TypeError: The element or ID supplied is not valid. (videojs)标记启动了不同的id属性。

我是否应该根据其他链接建议使用一系列视频播放器而不是一个视频播放器？这是我的源代码：

的Video.js：

<video>

html文件（使用angularjs查看）：

(function () {
    'use strict';

    angular
        .module('controller.video', [])
        .controller('Video', ['$scope', 'model', '$sce', function ($scope, model, $sce) {

            $scope.ids = [];
            $scope.videos = {};
            $scope.titles = {};
            $scope.specialtyvideos = null;
            $scope.likes = {};
            $scope.comments = {};

            $scope.getVideos = function () {
                model.get('specialty', 'Colorectal').then(function (res) {
                    $scope.specialtyvideos = res.data;
                    for (var i=0 ; i<$scope.specialtyvideos.length ; i++) {
                        $scope.videos[$scope.specialtyvideos[i]._id] = $sce.trustAsResourceUrl($scope.specialtyvideos[i].src);
                        $scope.titles[$scope.specialtyvideos[i]._id] = $scope.specialtyvideos[i].title;
                        $scope.ids.push($scope.specialtyvideos[i]._id);
                    }
                });
            };

            $scope.specialtiesVideo = function (id) 
            {
                var element = ""+id;
                console.log(id);
                console.log(videojs);
                var vjs = videojs(id);
                vjs.aspectRatio("16:9");
                vjs.autoplay(false);
                vjs.controls(true);
            };

            $scope.getLikes = function (id) {
                model.get('likes', id).then(function (res) {
                    $scope.likes[id] = res.data.length;
                });
            };

            $scope.getComments = function (id) {
                model.get('comments', id).then(function (res) {
                    $scope.comments[id] = res.data.length;
                });
            };

            $scope.initialize = function () {
                $scope.getVideos();
            };

        }]);
})();

这是主索引html页面中的依赖项：

<ion-view id="page17" class=" " ng-controller="Video" ng-init="initialize();">
      <ion-content class="has-header">
        <div class="list card" ng-repeat="i in ids">
          <div class="item item-avatar">
            <img src="">
            <h2>{{ titles[i] }}</h2>
          </div>
          <div class="container" ng-init="specialtiesVideo(i)">
              <div class="videocontainer">
                  <video class="video-js" id="{{ i }}" src="{{ videos[i] }}"></video>
              </div>
          </div>
          <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
              <i class="icon ion-thumbsup" ng-init="getLikes(i);"></i>
              {{ likes[i] }} Likes
            </a>
            <a class="tab-item" href="#">
              <i class="icon ion-chatbox" ng-init="getComments(i);"></i>
              {{ comments[i] }} Comments
            </a>
            <a class="tab-item" href="#">
              <i class="icon ion-share"></i>
              Share
            </a>
          </div>
        </div>
      </ion-content>
</ion-view>

Answer 1

当我意识到我的angularjs代码执行速度比网页渲染要快得多时，我找到了问题的解决方案。我使用动态的videojs数组来播放我必须在一个页面中播放的许多视频。（虽然我认为单个videojs实例会这样做。）

我接下来要做的就是使用$timeout延迟特定功能，window.setTimeout是{j}的$scope.specialtiesVideo = function (id) { var element = id; console.log(id); var confirm = document.getElementById(id); console.log(document.getElementById(id)); $scope.videoplayers[id] = videojs(id); console.log("videojs enabled for the video identified by ID :"+id); $scope.videoplayers[id].aspectRatio("16:9"); $scope.videoplayers[id].autoplay(false); $scope.videoplayers[id].controls(true); }; $timeout(function() { for (var id=0;id < $scope.ids.length;id++) { $scope.specialtiesVideo($scope.ids[id]); } }, 20000);包装器。

以下是解决错误的代码段：

#include <bits/stdc++.h>
using namespace std;
int main(void)
{
    vector<int> v;
    tuple<int,int,int> t1 = make_tuple(1,2,3)
    tuple<char,int,double,int,long long int >t2;
    t2=make_tuple( 'a' , 2 , 2.3 , 1 , 10000 );
    cout<< get<2>t1 << " "<< get<0> t2;// will print 3 and 'a'
}

其中20000是我作为要呈现的页面的窗口所提供的毫秒数，以及在执行之后执行清除的堆栈，之后我执行了上面代码中显示的函数。

使用videojs（）函数处理多个<video>标记

1 个答案: