angular.js
<div ng-click="Fn.play(item.id)" id="{
{item.id}}" ng-mouseover="Fn.hover(item.id,'block')" ng-mouseout="Fn.hover(item.id,'none')">
<video loop="loop" controls="controls" ng-src="{
{item.img}}" width="200px" height="120px">
</video>
<div class="title">{
{item.title}}</div>
<div class="banner banner1"></div>
</div>
事件
单击全屏播放
play: function (v) {
var video = document.getElementById(v).children[0];
var button = document.getElementById(v).children[2];
if (video.paused) {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen();
}
video.play();
button.style.display = "none";
} else {
if (video.exitFullscreen) {
video.exitFullscreen();
} else if (video.mozCancelFullScreen) {
video.mozCancelFullScreen();
} else if (video.webkitCancelFullScreen) {
video.webkitCancelFullScreen();
}
video.pause();
button.style.display = "block";
}
},
hover: function (id, value) {
var video = document.getElementById(id).children[0];
var button = document.getElementById(id).children[2];
if (video.paused) {
button.style.display = value;
}
},