前言

video-js是一款基础的jquery视频插件，简单轻便，但是配置起来总会有些奇怪的问题，故以此文记录

一、视频无法播放

这个应该是最常见的问题，一般需要考虑三个问题：

1.视频源

首先需要考虑是否是视频源无法正常打开，否则你改了一圈代码也是白改 ~QAQ
其次要考虑视频源请求时是否正确配置了请求参数，比如：cookie，token，请求头格式等等。

2.本地配置

这个主要是看视频格式设置与视频源是否一致
浏览器或者设备是否支持此视频格式

二、其他

1.基础的配置文件

//视频配置playerOptions: {playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度autoplay: true, //如果true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: 'zh-CN',aspectRatio: '9:6', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: "",src: ""}],poster: "", //你的封面地址//width: document.documentElement.clientWidth, //播放器宽度notSupportedMessage: '视频加载中', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: false,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true //全屏按钮}},

2.一些控制操作

使用的是video-js.js插件
$(document).ready(function () {//oldTime 视频暂停时的所处的位置oldTime = 0;myPlayer = videojs('main_video', {"loop": false, //是否循环播放:true/false"muted": true,"autoplay" :false,}, function () {this.on('pause', function () {//暂停console.log("暂停");clearInterval(time);});this.on('play', function () {//开始播放console.log("开始播放");time = setInterval("playVideo()", 20*1000);});
//===这是重点==================================================================this.on('timeupdate', function() {//播放时间改变//获得当前视频所在的时间var locl = myPlayer.currentTime();//如果oldTime+10<locl;则表示视频被快进了（我定了10秒算快进）if(oldTime+10 >= locl){//如果视频时间locl比记录时间小oldTime，则表示后退了if(locl > oldTime){oldTime = locl;}}else{//赋值myPlayer.currentTime(oldTime);}console.log("播放时间改变");});});//添加视频文件地址到播放器$(".list-group-item").click(function () {myPlayer.src($(this).data("video_url"));myPlayer.load($(this).data("video_url"));});})

总结

可能在很多大佬看来这篇文章写的都是废话，但我想以此作为记录，日后有更多关于video-js的内容也会更新到此。也希望能和更多的人交流一起进步。以上。

记录video-js出现的一些异常相关推荐

加mp4文件后js失效_记录一波video.js的使用及问题
最近的项目中需要播放视频,鉴于html5元素的一些坑及不想自己造轮子,于是就找到了web端播放视频使用量最多的插件video.js,video.js是国外开发者开发的,英语本身就不好的我看英文文档简直 ...
【BUG】小米5中 video.js 在钉钉 webview 中全屏后后退无法弹出虚拟键盘
BUG背景触发环境 MI 5 或 MI 6(三星没问题) 钉钉3.5.3(开发版没问题)Webview [WebKit 537.36 Chrome 57.0.2987.132](识别方法见文末) v ...
videojs 卡顿_流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了...
总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播播放器:VideoJs 直播: 1.阿里云直播,需要CDN设置HTTP头 2.本地直播需要设置直播访问服务器 ...
视频播放插件 Video.js 使用和个版本下载
来源:https://blog.csdn.net/zhanghao143lina/article/details/79457035 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,V ...
基于video.js 的在线播放功能
因为在此次项目中需要实现在线播放视频的效果. 所以上网百度了一下相关的插件, 最后决定选用基于html5的video.js插件来实现. video.js也是开源免费的,下载十分方便. 首先下载 vid ...
Video.js插件切换视频源并操作m3u8格式视频
目录第一章 videojs的配置与简介第二章更改视频源代码与实例第三章 api的部分应用实例第四章视频api补充介绍添加事件事件绑定前言:老师让我修改一个需要播放器的界面,之前的播放 ...
video.js在vue项目中设置中文语言包，报错videojs is not defined 解决办法
在vue项目中使用video.js时要求中文化,但是网上的解决办法不太好找,特此记录一下. 错误步骤: 根据网上的教程,找到中文包在node_modules/video.js/dist/lang/zh ...
Video.js简单使用
今天项目中需要跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法. <html> <head> ... <!-- 引入vide ...
开源视频流服务_使用开源Video.js进行实时视频流
开源视频流服务去年,我写过有关使用Linux创建视频流服务器的文章 . 该项目使用实时消息协议(RTMP),Nginx Web服务器,Open Broadcast Studio(OBS)和VLC媒体 ...
关于VIDEO.JS播放器控制栏播放按钮点击问题
关于如何调用video.js组件作为播放器实现视频播放功能,网上有很多相关帖子,这里就不详细展开了.但在众多帖子里面,都没有提到网页版video的控制栏播放按钮点击问题,特此留贴记录一番. 症状是如下 ...

记录video-js出现的一些异常

文章目录

前言