更改视频源HTML

时间:2018-07-11 10:13:05

标签: html angularjs video coffeescript

所以我有以下html代码。

<div class="panel">
        <div class="col-sm-9">>
            <video id="currentVideo" width="650" height="350" controls>
              <source src="{{currentVideo.Source}}" type="video/mp4">
              Your browser does not support the video tag.
            </video>
        </div>
        <div class="col-sm-3" ng-click="showVideo(video)">
            <ul ng-repeat="video in videoHelpFiles" id="playlist">
                <div ng-click="showVideo(video)">
                    <span><h4> {{video.Title}} </h4></span>
                    <span><p> {{video.Description}} </p></span>
                    <br>
                </div>
            </ul>
        </div>
    </div>

这是我的咖啡脚本。

.controller 'HelpCtrl', (
    $scope

) ->
    $scope.videoHelpFiles = [
            Title: "Video 1"
            Description: "Desc 1"
            Source: '../../videos/video1.mp4'
        ,
            Title: "Video 2"
            Description: "Desc 2"
            Source: '../../videos/video2.mp4'
        ]

    $scope.currentVideo = $scope.videoHelpFiles[0]

    $scope.showVideo = (video) ->
        $scope.currentVideo = video

我的问题是如何使视频在点击后发生变化。当我使用iFrame代替视频(显然我不想这么做)时,此代码有效,但是没有人能解释为什么当我尝试使用视频代码时,这不起作用吗?

2 个答案:

答案 0 :(得分:0)

首先,您的showVideo(视频)

   <div class="col-sm-3" ng-click="showVideo(video)">

视频实例不在ng-repeat范围内。我将发送未定义的引用到showVideo函数

答案 1 :(得分:0)

我有一个类似的问题...尝试这种方式:

<video id="currentVideo" src="{{currentVideo.Source}}" width="650" height="350" controls>
    Your browser does not support the video tag.
</video>

对我有用。