angular.js h5 视频播放器

为解决手机端视频播放兼容性问题,采用AngularJS结合videogular.js开发跨平台视频播放器。通过自定义HTML结构及JavaScript配置实现流畅播放体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近应公司的要求做一个手机端视频播放器,之前打算就用h5的video播放,但是到手机上去看的时候兼容不好,因为项目本身基于angularjs,所有就找了一个videogular.js感觉不错,直接上代码:

<!--HTML-->
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
    <videogular vg-theme="controller.config.theme.url">
        <vg-media vg-src="controller.config.sources"
                  vg-tracks="controller.config.tracks">
        </vg-media>

        <vg-controls>
            <vg-play-pause-button></vg-play-pause-button>
            <vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
            <vg-scrub-bar>
                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            </vg-scrub-bar>
            <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
            <vg-volume>
                <vg-mute-button></vg-mute-button>
                <vg-volume-bar></vg-volume-bar>
            </vg-volume>
            <vg-fullscreen-button></vg-fullscreen-button>
        </vg-controls>

        <vg-overlay-play></vg-overlay-play>
    </videogular>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/videogular/videogular.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/controls/vg-controls.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/overlay-play/vg-overlay-play.js"></script>
/**css*/
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.videogular-container {
    width: 100%;
    height: 320px;
    margin: auto;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .videogular-container {
        width: 1170px;
        height: 658.125px;
    }

    .videogular-container.audio {
        width: 1170px;
        height: 50px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .videogular-container {
        width: 940px;
        height: 528.75px;
    }

    .videogular-container.audio {
        width: 940px;
        height: 50px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .videogular-container {
        width: 728px;
        height: 409.5px;
    }

    .videogular-container.audio {
        width: 728px;
        height: 50px;
    }
}
//js
'use strict';
angular.module('myApp',
        [
            "ngSanitize",
            "com.2fdevs.videogular",
            "com.2fdevs.videogular.plugins.controls",
            "com.2fdevs.videogular.plugins.overlayplay"
        ]
    )
    .controller('HomeCtrl',
        ["$sce", function ($sce) {
            this.config = {
                preload: "none",
                sources: [
                    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
                    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
                    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
                ],
                tracks: [
                    {
                        src: "pale-blue-dot.vtt",
                        kind: "subtitles",
                        srclang: "en",
                        label: "English",
                        default: ""
                    }
                ],
                theme: {
          url: "https://unpkg.com/videogular@2.1.2/dist/themes/default/videogular.css"
                }
            };
        }]
    );

效果如下:
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值