AngularJS H5 video src url

首先說下背景 我這邊開發web  使用後H5頁面 用的是angularJs  

問題: 在開發的時候 把路徑放在H5頁面裏面的video標籤 路徑是對的  視頻也是可以播放的 但是就是播放不了令人費解

如果我直接使用 

 <video src="{{item.url}}"  width="320" height="240" controls="controls">

                                                    </video>

這樣會在前臺報出angularJs錯誤  

Error: $interpolate:interr

Interpolation Error

說是插值誤差

然後我查到 在angularJs 中有一個 ng-src  我就把上列代碼中的src 變成 ng-src 

但是還是不行 他還是會在前臺爆出 插值錯誤

最後我在網上找到了答案  

爲什麼我們直接給ng-src 或者 src 路徑是時不行的呢?

原來:

在angularJs中爲了避免安全漏洞，一些ng-src或者ng-include都會進行安全校驗，因此常常會遇到一個iframe中的ng-src無法使用。

人話就是  我們用angular裏面的 ng-src 時會進行安全檢查  因爲我們是訪問資源服務器上面的視頻  所以他不給你這個url通過 所以我們就不放不了視頻

這裏有人要說了  爲什麼我用 src="{{item.url}}" 也不行 我想說的是 因爲我們使用了{{item.url}} 這個在頁面加載的時候 angularjs 會把src變成ng-src  這樣所以不能通過

那麼我們怎麼解決這個url問題  

簡單直接 我們直接告訴angularJs 這個url是安全的  你信任他 

方法是 $sce服務把一些地址變成安全的、授權的鏈接...簡單地說，就像告訴門衛，這個陌生人其實是我的好朋友，很值得信賴，不必攔截它！

常用的方法有：

$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

下面我是我處理過的代碼 已經可以執行了

                                                <div class="col-sm-10">
                                                    <video ng-src="{{videoUrl(item.url)}}"  width="320" height="240" controls="controls">

                                                    </video>
                                                </div>

下面是JS videoUrl方法

 /**
     * 視頻路徑處理
     */
    $scope.videoUrl = function(url){
        return $sce .trustAsResourceUrl(url);
    }

這樣我的視頻就可以直接播放了

感謝網絡上的大牛和前輩的分享,希望這邊文章可以幫助到你 謝謝