跳至主要內容

章节打点

示例

示例代码 vue

<template>
	<div class="native-root">
		<div class="native-js-view" id="mse">
		</div>
	</div>
</template>

<script>
	import {
		Player
	} from 'zwplayer-vue2x'

	export default {
		name: 'vue-native',
		data() {
			return {
				zwplayer: null,
				currentTime: '',
				marker_list: [{
						"title": "浙江队晋级与争议",
						"desc": "讨论浙江队在CBA比赛中的惊险胜利和历史性晋级总决赛，以及深圳队的争议性失利和球迷的激烈反应。",
						"time": 0,
						"duration": 44,
						"thumb": null
					},
					{
						"title": "裁判问题与篮协应对",
						"desc": "分析比赛中裁判的吹罚尺度和争议，以及中国篮协和CBA公司对裁判问题的反应和处理措施。",
						"time": 44,
						"duration": 97,
						"style": {
							"background": "blue"
						},
						"image": null
					},
					{
						"title": "NBA赛场争议与湖人挑战",
						"desc": "探讨NBA赛场上的争议，特别是湖人队在季后赛中的表现和面临的挑战，以及篮球评论员对这些事件的看法和预测。",
						"time": 141,
						"duration": 76,
						"style": {
							"background": "green"
						},
						"image": null
					},


				]
			}
		},

		methods: {
			onCurrentTime() {
				var vm = this;

				if (vm.zwplayer) {
					vm.currentTime = vm.zwplayer.CurrentTime;
				}
			}
		},

		created() {
			console.log('NativeJS Created: ');
		},

		mounted() {
			console.log('NativeJS mounted: ');

			this.zwplayer = new Player({
				playerElm: document.querySelector('#mse'),
				url: 'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
				fluid: true,
				optionButton: true,
				chapterButton: true,
				logo: {
					icon: 'http://doc.zwplayer.cn/logo.png',
					dock: 'right',
					opacity: '70',
					//x: '10%',
					y: '2%',
					width: '15%'
				}
				 
			});

			this.zwplayer.setChapters(this.marker_list);
		},

		destroyed() { // for vue3.x: unmounted
			let vm = this;
			console.log('NativeJS unmounted');
			if (vm.zwplayer) {
				vm.zwplayer.destroy();
				delete vm.zwplayer;
			}
		}
	};
</script>

<style>
	.native-js-view {
		width: 1024px;
		height: 576px;
	}

	.time-view {
		display: inline-block;
		padding: 2px 6px;
	}
</style>

说明

对于网络视频文件，尤其是针对教学用的视频文件，里面的内容可能比较丰富，为了便于用户学习，制作人员可能会为该视频文件设置打点，每一个打点是一个知识点的开始，用户可以根据预设的章节打点随意导航知识点，方便学习。
zwplayer提供setChapters 方法来支持章节打点，建议在视频文件加载以后再调用此方法加载章节打点信息。setChapters支持的参数可以是如下类型：

1. 包含章节内容的大字符串，字符串可以是json或者vtt文件格式

2. 已经分析好的js数组

3. 章节文件的http地址

chapters 参数可以是字符串，也可以是一个已经分析好的js数组。如果chapters是字符串并且是以http或https开头的，则zwplayer会把该参数当作一个章节的url，在加载时自动从远程下载；如果chapters是以字符“[” 开头的，则会被当作一个JSON数组来进行分析；如果chapters是以WEBVTT开头的，则会当作一个WEBVTT文件来处理。

章节文件的json格式是zwplayer定义的私有格式，一个json格式的章节文件内容如下：

参数

[
{
	"title": "三角形知识点",
	"desc": "介绍三角形的性质，全等，与附加知识",
	"time": "01:04",
	"thumb": null
},
{
	"title": "四边形知识",
	"desc": "介绍四边形的性质，全等，与附加知识",
	"time": "02:04",
	"image": null
},
{
	"title": "五边形知识点",
	"desc": "介绍五边形的性质，全等，与附加知识",
	"time": "03:04",
	"image": null
},
{
	"title": "六边形知识点",
	"desc": "介绍六边形的性质，全等，与附加知识",
	"time": "04:04",
	"image": null
},
{
	"title": "七边形知识点",
	"desc": "介绍七边形的性质，全等，与附加知识",
	"time": "05:04",
	"image ": null
}
]

参数说明

如上章节列表json中每一个章节点都是一个js对象，对象的属性说明如下：

属性名说明
title章节标题
desc章节简介
time章节的起点时间，给是为hh:mm:ss 或浮点数
image章节起点图片，zwplayer当前不支持

如下是zwplayer加载章节信息的示例代码：

<script language=”javascript”>
window.mainplayer = new ZWPlayer({ //将对象保存到mainplayer用于追加弹幕
url: 'http://192.168.1.100/vod/movie.mp4',
playerElm:'#player-holder', //player 元素ID ,也可以直接的DOM对象
controlbar: true,
chapterButton: true,
autoplay: true
});

//示例代码在时钟事件里延时加载章节
setTimeout(function() {
if (window.mainplayer) {
    //获取章节url，实际应用中可能是通过ajax获取得到的
    window.mainplayer.setChapters('http://192.168.1.202/chapters.json?v=236');
}
}, 1000)
<script>

提示：章节也可以是一个已经分析好的js数组，示例如下

<script language=”javascript”>
window.mainplayer = new ZWPlayer({ //将对象保存到mainplayer用于追加弹幕
url: 'http://192.168.1.100/vod/movie.mp4',
playerElm:'#player-holder', //player 元素ID ,也可以直接的DOM对象
controlbar: true,
chapterButton: true,
autoplay: true
});

//示例代码通过jQuery的ajax加载章节信息
$.get('http://192.168.1.202/chapters.json?v=236', {}, function(data) {
if (window.mainplayer) {
    // 章节信息如果被正确加载，data应该是一个js数组了
    window.mainplayer.setChapters(data);
}
}, 'json')
<script>

提示：如果成功设置章节信息，播放器进度条上会出现相应的打点标志，同时如果在播放器构造参数里设置了chapterButton 为true，zwplayer也会同时创建一个章节菜单，章节菜单的触发按钮将出现再播放器控制条的时间显示区附近。

Copyright©zwplayer
Copyright © 2025 zwplayer