默认情况下全屏打开HTML5视频?

时间:2016-03-21 15:25:30

标签: html angularjs html5-video

我希望在HTML应用中托管一些HTML5视频。在打开视频时,他们目前只是在一个页面中打开并默认播放可用的控件以及打开全屏的选项,是否有任何方法可以在打开页面时立即全屏播放?

<div class="video-container" data-tap-disable="true">
<div class="videotitle">{{product.title}}</div>
<div class="videoduration">Duration: {{product.duration}}</div>
<video id="myVideo" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="{{product.video}}" type="video/mp4"/></video>

这是我的Angular控制器,我假设JS代码适合放在某处,而不是我的product.html

.controller('ProductCtrl', function (Products, $rootScope, $scope,  $stateParams, $state, $timeout) {
$scope.product = Products[$stateParams.productId];

var video = document.getElementById("myVideo");

// Stop video playing when we go to another page
$rootScope.$on('$stateChangeStart', function () {
stopVideo();
});

 // Go to list of other videos when individual HTML5 video has finished  playing
angular.element(video).bind('ended', function () {
$state.go('app.products');
});

function stopVideo() {
video.pause();
video.currentTime = 0;
}
});

2 个答案:

答案 0 :(得分:2)

public class Test {
    static String myVariable = "hi";
    public Test(){
        String myVariable = "hello";
        System.out.println(Test.myVariable);  // hi
        System.out.println(myVariable);       // hello

    }
}

答案 1 :(得分:0)

var video = $("#myVideo");
video.on('click', function(e){
    var vid = video[0];
    vid.play();
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }
});