video.js 视频播放插件使用

video.js 实现视频播放，多种语言字幕点击切换

1.参考链接video.js官网

https://videojs.com/

2.html代码视频资源标签source track 字幕资源标签，在html中可不写

    <video id="myVideo" class="video-js"><source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /><trackdefaultkind="subtitles":label="简体中文"/>
</video>

3.初始化

 mounted() {this.initVideo()},method:{initVideo() {let that = this//初始化视频方法myPlayer = this.$video(document.getElementById('myVideo'), {language: 'zh-CN',//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。controls: true,//自动播放属性,muted:静音播放autoplay: 'autoplay',//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。preload: 'auto',})myPlayer.ready(function () {myPlayer.volume(0.5)myPlayer.play()})console.log(myPlayer, 'document.getElementById')//监听视频播放完成myPlayer.on('ended', function () {myPlayer.exitFullscreen()})//监听视频暂停myPlayer.on('pause', function () {})//监听视频播放myPlayer.on('play', function () {})},
}

4.根据接口数据动态修改视频播放地址

myPlayer.src(data.video.url_resource.url)//括号中为后台接口返回的视频地址

5.根据接口数据动态修改视频字母地址以及实现多语言字幕切换
在修改字母地址之前需要先清除原有的字幕轨道，字幕轨道里数据为数组的形式

var oldTracks = myPlayer.remoteTextTracks()var i = oldTracks.lengthwhile (i--) {myPlayer.removeRemoteTextTrack(oldTracks[i])}

6.赋值新的字幕地址

   var zhurl = {kind: 'subtitles',label: '中文简体',    //字幕语言src: url,     //url为接口返回字幕地址的地址default: 'true',}myPlayer.addRemoteTextTrack(zhurl, true)    //修改视频播放地址

video.js 视频播放插件使用相关推荐

vue项目里面使用video.js视频播放插件
项目里面需要实现一个视频播放列表如上图所示的列表~~~过程如下: 引入video.js文件 npm install -S video.js 在main.js里面引入相关文件,并挂载在window对象 ...
video.js视频播放器进度条标记的功能实现
video.js视频播放器的使用 video.js视频播放器安装引入使用 video.js视频播放器接到个需求,需要一个视频播放页面,并且进度条需要在某个时间点打上标记.在网上找了一下,发现 ...
【VideoJs】初识videojs video.js 视频播放器的基本使用 videojs基础用法 videojs视频播放器 vue3中使用videojs
videojs介绍免费,开源插件多可自定义 [推] 虽然,但是Videojs算好了,但我觉得有点杂,特别是文档与插件,且自定义插件有点困难,也可能是我比较菜吧相比之下,我还是强烈推荐 [Xgp ...
Vue中使用Video.js视频播放器
Video.js是一个有着HTML5背景的网络视频播放器.它同时支持HTM5和Flash视频,简单来说就是HTMl5 和 Flash 视频播放器安装: npm install video.js ma ...
linux 视频插件,avpro video 插件-Avpro Video(Unity视频播放插件)下载 v1.039官方免费版--pc6下载站...
AvproVideo是一款由强大团队出品的可以在Unity上安装使用的万能多平台视频播放插件AvproVideo支持WindowslinuxiosmacAndroid等多平台万能播放.. 相关软件软件 ...
Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...
JS进阶篇--ckplayer.js视频播放插件
网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放. 可调用flash也可以调用html5播放器: <div id="a1&q ...
swfobject.js视频播放插件
在网页中经常会用到视频播放的功能,下面介绍一下swfobject.js的视频播放应用: html代码结构: <div id="video_content"></d ...
vue开发移动端使用video.js播放视频
安装引入文档 HTML代码 css自定义播放按钮 css居中播放按钮 css设置简洁播放按钮 css设置海报占据整个视频空间 js使用设置 videojs设置中文销毁视频播放器实例使用html ...

video.js 视频播放插件使用

video.js 实现视频播放，多种语言字幕点击切换

video.js 视频播放插件使用相关推荐

最新文章

热门文章