视频播放插件video和videogular

最新推荐文章于 2021-06-29 03:54:57 发布

weixin_33862188

最新推荐文章于 2021-06-29 03:54:57 发布

阅读量365

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/zhangyafei/blog/839707

版权

2019独角兽企业重金招聘Python工程师标准>>>

以前，没做视频的时候。总是在想视频插件没什么用处啊。毕竟h5的video插件已经够用了。直到，看到Chrome上的video右下角那个小小的下载图标。

我尝试了2个插件一个是基于html5的video，一个更适用于angular的videogular。

我直接把我的可运行代码放上来了。具体说明请参考下方链接

一.video.js

<!DOCTYPE html>
<html>
<head>
  <link href="http://vjs.zencdn.net/5.16.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
  <script src="http://vjs.zencdn.net/5.16.0/video.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="iphone销量.png" data-setup="{}">
    <source src="20160930.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
</body>
</html>

中文使用说明 http://www.oschina.net/p/video-js/similar_projects

github地址 https://github.com/videojs/video.js

二. videogular

html文件

<!DOCTYPE html>
<html>
<head>
<link href="node_modules/videogular-themes-default/videogular.min.css" rel="stylesheet">
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="node_modules/videogular/videogular.js"></script>
<script src="node_modules/videogular-controls/vg-controls.js"></script>
<script src="node_modules/videogular-overlay-play/vg-overlay-play.js"></script>
<script src="node_modules/videogular-poster/vg-poster.js"></script>
<script src="node_modules/videogular-buffering/vg-buffering.js"></script>
<script src="js/main.js"></script>
<style type="text/css">
.videogular-container {
  width: 100%;
  height: 320px;
  margin: auto;
  overflow: hidden;
}
 
@media (min-width: 1200px) {
  .videogular-container {
    width: 1170px;
    height: 658.125px;
  }
}
 
@media (min-width: 992px) and (max-width: 1199px) {
  .videogular-container {
    width: 940px;
    height: 528.75px;
  }
}
 
@media (min-width: 768px) and (max-width: 991px) {
  .videogular-container {
    width: 728px;
    height: 409.5px;
  }
}
</style>
</head>

<body>
  <div ng-app="myApp">
  <div ng-controller="HomeCtrl as controller" class="videogular-container">
    <videogular vg-theme="controller.config.theme">
      <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' }}</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' }}</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>
      <vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
    </videogular>
  </div>
</div>

</body>
</html>

main.js

'use strict';
angular.module('myApp',
		[
			"ngSanitize",
			"com.2fdevs.videogular",
			"com.2fdevs.videogular.plugins.controls",
			"com.2fdevs.videogular.plugins.overlayplay",
			"com.2fdevs.videogular.plugins.poster"
		]
	)
	.controller('HomeCtrl',
		["$sce", function ($sce) {
			this.config = {
				sources: [
					{src: $sce.trustAsResourceUrl("20160930.mp4"), type: "video/mp4"}
				],
				tracks: [
					{
						src: "http://www.videogular.com/assets/subs/pale-blue-dot.vtt",
						kind: "subtitles",
						srclang: "en",
						label: "English",
						default: ""
					}
				],
				plugins: {
					poster: "http://www.videogular.com/assets/images/videogular.png"
				}
			};
		}]
	);

英文使用说明 http://www.videogular.com/tutorials/how-to-start/

github地址 https://github.com/videogular/videogular

转载于:https://my.oschina.net/zhangyafei/blog/839707