我在使用 HTML5 时遇到问题video
标签和iconic
.
这是我的模板的一部分:
<ion-view>
<ion-content overflow-scroll="true" data-tap-disable="true">
<div class="list card">
<div class="item item-body" style="padding: 5% 5% 5% 5%">
<div class="player">
<video controls="controls" autoplay id="sr"></video>
</div>
</div>
</div>
</ion-content>
</ion-view>
这是我的控制器:
.controller('viewVideoCtrl', function ($scope, $state, $stateParams) {
var videoPath = URL + "uploadFiles" + $stateParams.videoPath;
var videoObject = document.getElementById("sr");
videoObject.src = videoPath;
var webkitBeginFullScreen = function () {
alert("video has fullScreen!");
};
var onVideoEndsFullScreen = function () {
alert("fullScreen has end!");
};
videoObject.addEventListener('webkitbeginfullscreen', webkitBeginFullScreen, false);
videoObject.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);
});
如您所见,没有自定义控制按钮video
标签并使用由 chromium 本身创建的默认控制栏。
现在我想做点什么fullscreen
按钮被按下。我找到了添加两个侦听器的解决方案:webkitbeginfullscreen
and webkitendfullscreen
到视频对象,但它没有被触发。
我不确定 Android 还是 iOS,但是<video>
元素可以使用以下三个事件之一:
webkitfullscreenchange
mozfullscreenchange
fullscreenchange
并尽可能规格说明 https://fullscreen.spec.whatwg.org/这就是你所拥有的一切。
See 这个例子 http://jsbin.com/gojakof/edit?html,js或以下代码:
function onFullScreen(e) {
var isFullscreenNow = document.webkitFullscreenElement !== null
alert('Fullscreen ' + isFullscreenNow)
}
document.getElementById("video").addEventListener('webkitfullscreenchange', onFullScreen)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)