我们最近从直接的 PHP(Laravel) 应用程序切换到 AngularJS 应用程序。我在 MP4 文件的两个实例中都使用了 VideoJS。
PHP 版本有效,现在 AngularJS 版本无效。 HTML5 给我一个错误代码 4 MEDIA_ERR_SRC_NOT_SUPPORTED。
这不是编码问题,因为我可以直接在 iPad 上的 Chrome 和 Safari 中播放该文件,并且它以前基于 PHP 时有效。
我相信这是因为 javascript 在通过指令加载视频后动态加载视频。
这在桌面上工作正常,iPad/iPhone 是唯一有这个问题的。
如何让这个东西播放?
HTML
<video
ui-if='upload.filename'
class="video-js vjs-default-skin"
ng-src='{{ main.videoUrl }}{{ upload.filename }}'
height='400'
width='100%'
poster='/image/resize/{{ upload.image }}/400/400'
videojs
controls></video>
VideoJS 指令
directives.directive('videojs', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
attrs.type = attrs.type || "video/mp4";
attrs.id = attrs.id || "videojs" + Math.floor(Math.random() * 100);
attrs.setup = attrs.setup || {};
var setup = {
'techOrder': ['html5', 'flash'],
'controls': true,
'preload': 'auto',
'autoplay': false,
'height': 400,
'width': "100%",
'poster': '',
};
setup = angular.extend(setup, attrs.setup);
l(setup)
element.attr('id', attrs.id);
var player = videojs(attrs.id, setup, function() {
this.src({
type: attrs.type,
src: attrs.src
});
});
}
};
}]);
更新1
Videogular 是一个出色的解决方案 https://github.com/2fdevs/videogular
最佳答案
媒体元素
HTML
<video
src='{{ main.videoUrl }}{{ upload.filename }}'
height='400'
width='100%'
preload='auto'
poster='/image/resize/{{ upload.image }}/400/400'
mediaelement>
</video>
AngularJS 指令
directives.directive('mediaelement', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
attrs.$observe('src', function() {
element.mediaelementplayer();
});
}
}
});
关于javascript - VideoJS 播放器无法在 iPad 上使用 AngularJS 播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19041168/