2016-03-21 11 views
1

HTMLアプリケーションでHTML5ビデオをホストしたいと考えています。ビデオを開くときに、現在ページ内で開き、デフォルトでフルスクリーンを開くオプションで利用可能なコントロールで再生すると、ページを開くとすぐにフルスクリーンで再生する方法はありますか?ここで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> 

は私の角度コントローラですが、私は私の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; 
} 
}); 
+0

[HTML5のフルスクリーンビデオの可能性のある重複とは対照的に、JSコードはどこかここで収まると仮定します](http://stackoverflow.com/questions/6039909/html5-full-screen-video) – Erazihel

+0

[videogular](http://www.videogular.com/)をご覧ください –

答えて

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(); 
    } 
}); 
+0

これはangularJSの回答ではありません(しかし、それは一般的な答えです)、O Pはディレクティブの中でそれを使用し、コントローラはDOM操作コードをきれいに保つべきです –

+0

重複したコピーを貼り付けます。 – Erazihel

+0

あなたのコードにはWebkitとmozのフォールバックがありますが、これはAndroidのアプリケーションでも機能します。また、このコードはクリックが有効になっており、ページが開かれているときはクリックされません。 – me9867

0
var elem = document.getElementById("myVideo"); 
if (elem.requestFullscreen) { 
elem.requestFullscreen(); 
} else if (elem.msRequestFullscreen) { 
elem.msRequestFullscreen(); 
} else if (elem.webkitRequestFullscreen) { 
elem.webkitRequestFullscreen(); 
} 
+0

このコードは質問に答えるかもしれませんが、このコードが質問に答える理由および/または方法に関する追加の文脈を提供することで、長期的な価値が向上します。 – Ajean

関連する問題