Angularjs 如果条件为假，则在ng内部调用HTML5视频标记；如果条件为空，则在ng内部调用HTML5视频标记_Angularjs_Html_Html5 Video

Angularjs 如果条件为假，则在ng内部调用HTML5视频标记；如果条件为空，则在ng内部调用HTML5视频标记

angularjs html

Angularjs 如果条件为假，则在ng内部调用HTML5视频标记；如果条件为空，则在ng内部调用HTML5视频标记,angularjs,html,html5-video,Angularjs,Html,Html5 Video,我有一个视频列表，可以在服务器端进行动态更改；我想让他们在页面上以友好的方式出现，使用HTML5视频标签。如果列表为空，我希望ul标记显示“无视频”消息编辑：我刚刚注意到，当列表不为空时，它也试图调用错误的链接。他首先尝试调用该链接，然后调用正确的链接我的代码如下。编辑：如您所见，我正在使用video js和videojs contrib hls插件，我不知道它是否相关： <html lang="en"> <head> ... <link hre

我有一个视频列表，可以在服务器端进行动态更改；我想让他们在页面上以友好的方式出现，使用HTML5视频标签。如果列表为空，我希望

ul

标记显示“无视频”消息

编辑：我刚刚注意到，当列表不为空时，它也试图调用错误的链接。他首先尝试调用该链接，然后调用正确的链接

我的代码如下。编辑：如您所见，我正在使用video js和videojs contrib hls插件，我不知道它是否相关：

<html lang="en">
<head>
    ...
    <link href="http://vjs.zencdn.net/5.10.8/video-js.css" rel="stylesheet">
    <!-- If you'd like to support IE8 -->
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    ...
</head>
<body ng-app="MyApp">
    <ul ng-if="myVideos.length" ng-cloak>
        <li ng-repeat="myVideo in myVideos" ng-controller="MyCtrl">
            <div class="videoContainer">
                <p>{{myVideo.user_id}}</p>
                <p>{{myVideo.url}}</p>
                <video class="video-js vjs-default-skin" width="159" height="110" data-setup="{}">
                    <source src="{{myVideo.url}}" type="application/x-mpegURL">
                </video>
            </div>
        </li>
    </ul>
    <ul ng-if="!myVideos.length" ng-cloak>
        <li>
            <div class="videoContainer">
            No videos to show.
            </div>
        </li>
    </ul>

    <script src="js/lib/jquery-1.8.0.min.js"></script>
    <script src="js/lib/jquery-ui-1.8.21.custom.min.js"></script>
    <script src="js/lib/angular.js"></script><!-- Angular is v1.2.30 -->
    <script src="js/lib/bootstrap/bootstrap-transition.js"></script>
    <script src="js/lib/bootstrap/bootstrap-modal.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://vjs.zencdn.net/5.10.8/video.js"></script>
    <script src="js/lib/videojs-contrib-hls.js"></script>
    <script src="js/myScript.js"></script>
</body>

不幸的是，如果加载页面时列表为空，我可以在控制台中看到错误：

GET http://myIp:8080/%7B%7BmyVideo.url%7D%7D 404 Not found

它为什么这样做？我知道这只是一个控制台错误，但我对Angular是新手，它让我觉得某个地方出了问题。如何防止它？

您的浏览器正在尝试在页面加载时呈现“

{{myVideo.url}}

”的预编译src。我建议您阅读有关Angular的内容，并使用

ng src

尝试以下内容：

<video class="video-js vjs-default-skin" width="159" height="110" data-setup="{}">
     <source ng-src="{{myVideo.url}}" type="application/x-mpegURL">
</video>

这与您希望的原因相同。

出于安全考虑，标签视频不会实时复制

例如，如果您编译

document.getElementsByTagName("video")[0]

结果是空的。所以如果你编译

document.getElementsByTagName("button")[0]

结果是一个按钮（DomeElement）。

你能给我们看看你的js吗？这是你的html，不是你的js@DMCISSOKHO哇哦，对了。看来这更像是一个http请求问题。尝试直接访问

http://myIp:8080/%7B%7BmyVideo.url%7D%7D

请退出应用程序非常感谢！虽然这看起来更像是对问题的解释，而不是解决方案。你有什么解决办法吗？

document.getElementsByTagName("button")[0]