vue-video-player的简单使用

参考网址:
https://github.com/videojs/video.js
https://github.com/surmon-china/vue-video-player
https://www.freesion.com/article/4875170880/
https://www.npmjs.com/package/videojs-landscape-fullscreen

videojs官网地址:
https://videojs.com/getting-started/
https://docs.videojs.com/

这里我都是通过CDN的方式搭建项目,所以js等组件需要实现下载好

HTML页面代码


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		
		<script src="common/vue/vue.js" type="text/javascript" charset="utf-8">script>
		
		<script src="common/jquery.js">script>
		
		<link rel="stylesheet" type="text/css" href="common/base.css"/>
		
		
		<link rel="stylesheet" href="common/element/css/element-ui.css">
		<script src="common/element/js/element-ui.js">script>
		
		
		<script src="common/vue-element-extends/js/xe-utils.js">script>
		<script src="common/vue-element-extends/js/vue-element-extends-umd.js">script>
		<link rel="stylesheet" href="common/element-ui/index.css">
		
		
		
		<script src="common/video.min.js">script>
		<script src="common/videojs-landscape-fullscreen.min.js">script>
		<script src="common/vue-video-player.js">script>
		<link href="common/video-js.min.css" rel="stylesheet" />
		
		<link rel="stylesheet" href="common/custom-theme.css">
		<script type="text/javascript">
		  Vue.use(window.VueVideoPlayer)
		script>
		
		
		
		<link rel="stylesheet" type="text/css" href="css/vue-video-player-demo.css"/>
		<script src="js/vue-video-player-demo.js" type="text/javascript" charset="utf-8">script>
		
	head>
	<body>
		<div id="app" class="padding-xl">
			<h1>{{ title }}h1>
			<div class="player">
				<video-player class="video-player vjs-custom-skin"
					ref="videoPlayer"
					:playsinline="true"
					:options="playerOptions"
				>video-player>
		    div>
		div>
	body>
html>

js代码

var app;
var player;
$(document).ready(function(){
	app = new Vue({
		el: '#app',
		mounted: function () {
			console.log("vue挂载完成");
		},
		data: {
			title: 'vue-video-player-demo',
			playerOptions : {
			    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
			    autoplay: false, //如果true,浏览器准备好时开始回放。
			    muted: false, // 默认情况下将会消除任何音频。
			    loop: false, // 导致视频一结束就重新开始。
			    preload: 'auto', // 建议浏览器在
			    language: 'zh-CN',
			    aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
			    fluid: false, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
			    sources: [{
			      type: "video/mp4",//这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
			      src: "https://www.w3school.com.cn/example/html5/mov_bbb.mp4"  //url地址
			    }],
			    poster: "", //你的封面地址
			    // width: document.documentElement.clientWidth, //播放器宽度
			    notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					volumePanel: {
						inline: false, // 不使用水平方式
					}, // 音量控制
					// volumePanel: false, // 隐藏音量控制
					timeDivider: true, // 时间之间的分割线
					durationDisplay: true, // 总时长
					remainingTimeDisplay: false, // 隐藏剩余时长
					fullscreenToggle: true  //全屏按钮
				} // 控制栏配置
			}
		},
		mounted() {
			this.$nextTick(function () {
				app.initVideo();
				//播放
				player.on("play", function () {
					console.log("点击了播放");
				});
				//暂停
				player.on("pause", function () {
					console.log("点击了暂停");
				});
			});
		},
		methods: {
			/**
			 * 初始化视频
			 **/
			initVideo: function () {
				player = app.$refs.videoPlayer.player;
				// 配置横屏插件
				player.landscapeFullscreen({
					fullscreen: {
						enterOnRotate: true, //在横向旋转设备时进入全屏模式
						alwaysInLandscapeMode: true, //即使设备处于纵向模式,也始终以横向模式进入全屏(适用于chromium、firefox和ie>=11)
						iOS: true // 是否在iOS上使用假全屏(显示播放器控件而不是系统控件所需)
					}
				});
			}
		}
	});
});


页面效果

vue-video-player的简单使用_第1张图片

你可能感兴趣的:(js)