modest violet

modest violet

開発者としてのあれこれや、日々の雑記など

your future hasn't written yet. no one's has.
by Emmett Lathrop "Doc" Brown

Azure Media Player をレスポンシブ対応するには

f:id:shin21sk:20160820012212j:plain

 Azure Media Player は標準ではレスポンシブ対応していません。レスポンシブ対応をする為にはjava scriptで書くしか現状では無いようです。

1.HTML5ページのに下記のコードを指定します

<link href="//amp.azure.net/libs/amp/1.7.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/1.7.3/azuremediaplayer.min.js"></script>

2.HTML5ページのに下記のコードを指定します

<section id="videoSection">
    <div id="videoContainer">
    </div>
</section>

3.下記のJavaScriptを記入します

<script type="text/javascript">

    $(function() {

        var videoWidth = 500;
        if ($(window).width() < 750) {
            videoWidth = $(window).width() * 11 / 16;
        }
        document.getElementById("videoContainer").style.height = videoWidth + "px";
        $("#videoContainer").append('<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="100%" height="100%" poster="" tabindex="0"><source src="ここにMedia ServiceのURL" type="video/mp4" /><p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p></video>');
        $(document).ready(function () {
            window.addEventListener('resize', function (event) {
                if (window.innerWidth < 750) {
                    document.getElementById("videoContainer").style.height = $(window).width() * 11 / 16 + "px";
                } else {
                    document.getElementById("videoContainer").style.height = "500px";
                }
            });
        });

    });

</script>


 ASP.NET MVC がBootstrap標準なので、Azure Media Player もVideoタグで対応出来ればいいんですが・・・。これからに期待ですかね。