更改视频源 HTML

Question

所以我有以下 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 而不是视频时，此代码有效，显然我不想这样做，但有人能解释为什么当我尝试使用视频标签时这不起作用吗？

Answer 1

首先，你的showVideo(视频)

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

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

Answer 2

我有类似的问题...试试这个方法：

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

对我有用。

更改视频源 HTML

Changing video source HTML

html

video

coffeescript

angularjs