最近项目需要播放视频。鉴于html5元素
效果1.2，使用js初始化class="video-jsvjs-big-play-centeredvjs-fluid">
观看此视频请开启JavaScript，并考虑升级到支持HTML5视频的网络浏览器script>varplayer=videojs(document.getElementById('myVideo'),{controls:true,//是否显示控制栏poster:'xxx',//视频封面图片地址preload:'auto',autoplay:false,fluid:true,//自适应宽高language:'zh-CN',//设置语言muted:false,//是否静音inactivityTimeout:false,controlBar:{//设置控件条组件/*设置控件栏中组件的相关属性和显示'currentTimeDisplay':true,'timeDivider':true,'durationDisplay':true,'remainingTimeDisplay':false,volumePanel:{inline:false,}*//*使用children的form控制各个控件的位置，是否显示*/children:[{name:'playToggle'},//播放按钮{name:'currentTimeDisplay'},//当前播放时间{name:'progressControl'},//播放进度条{name:'durationDisplay'},//totaltime{//多次播放name:'playbackRateMenuButton','playbackRates':[0.5,1,1.5,2,2.5]},{name:'volumePanel',//音量控制inline:false,//不使用水平模式},{name:'FullscreenToggle'}//全屏]},sources:[//视频源{src:'//vjs.zencdn.net/v/oceans.mp4',type:'video/mp4',poster:'//vjs.zencdn.net/v/oceans.png'}]},function(){console.log('视频可以播放',this);});2、controlBar组件说明playToggle,//播放暂停按钮volumeMenuButton,//音量控制currentTimeDisplay,//当前播放时间timeDivider,//'/'分隔符durationDisplay,//总时间progressControl,//流时播放进度条ondemand,seektocontrolliveDisplay,//直播时，显示LIVEremainingTimeDisplay,//当前播放时间playbackRateMenuButton,//播放速率，仅html5模式目前支持设置播放速率fullscreenToggle//全屏控制currentTimeDisplay、timeDivider、durationDisplay是相对于remainingTimeDisplay的另一组组件，后者只显示当前播放时间，前者还显示总时间如果想显示前一种模式，即'当前时间/总时间'，可以在初始化播放器选项中配置：varmyPlayer=neplayer('my-video',{controlBar:{'currentTimeDisplay':true,'timeDivider':true,'durationDisplay':true,'remainingTimeDisplay':false}},function(){console.log('播放器初始化完成');});3.video.js样式修改.video-js{/*为.video-js设置字体大小，统一各个浏览器的样式，因为video.js使用em单位*/font-size:14px;}.video-jsbutton{outline:none;}.video-js.vjs-fluid,.video-js.vjs-16-9,.video-js.vjs-4-3{/*视频占容器高度*/高度：100%；背景颜色：#161616；}。vjs-poster{background-color:#161616;}.video-js.vjs-big-play-button{/*中间大播放按钮*/font-size:2.5em;行高：2.3em；高度：2.5em；宽度：2.5em；-webkit-border-radius:2.5em;-moz-边界半径：2.5em；边界半径：2.5em；:0.12em;保证金顶部：-1.25em；margin-left:-1.75em;}.video-js.vjs-paused.vjs-big-play-button{/*视频暂停时显示播放按钮*/display:block;}.video-js.vjs-error.vjs-big-play-button{/*视频加载出错时隐藏播放按钮*/display:none;}.vjs-loading-spinner{/*加载圆圈*/font-size:2.5em;宽度：2em；高度：2em；边界半径：1em；保证金顶部：-1em；margin-left:-1.5em;}.video-js.vjs-control-bar{/*默认显示控制条*/display:flex;}.video-js.vjs-time-control{display:block;}.video-js.vjs-remaining-time{display:none;}.vjs-button>.vjs-icon-placeholder:before{/*控制栏中的所有图标，图标字体大小最好使用px单位，如果使用em，各个浏览器的性能可能不同*/font-size:22px;line-height:1.9;}.video-js.vjs-playback-rate.vjs-playback-rate-value{line-height:2.4;font-size:18px;}/*进度条背景色*/.video-js.vjs-play-progress{color:#ffb845;背景颜色：#ffb845;}.video-js.vjs-progress-control.vjs-mouse-display{背景颜色：#ffb845;}.vjs-mouse-display.vjs-time-tooltip{padding-bottom:6px;background-color:#ffb845;}.video-js.vjs-play-progress.vjs-time-tooltip{display:none!important;}4.动态切换视频5.设置语言5.1传统形式开发对于以5.2、vue开发importVideofrom'video.js'/*不能直接导入js，否则会报错：videojsisnotdefinedimport'video.js/dist/lang/zh-CN.js'*/importvideo_zhCNfrom'video.js/dist/lang/zh-CN.json'importvideo_enfrom'video.js/dist/lang/en.json'import'video.js/dist/video-js.css'Video.addLanguage('zh-CN',video_zhCN);Video.addLanguage('en',video_en);6.解决iPhone播放时自动全屏问题（2019.09.23）iPhone设备播放视频时（微信浏览器也有此问题）会自动全屏，这里的全屏不是普通手机横屏的全屏类似于模态弹窗的全屏。解决方法是在video标签中添加playsinline="true"属性7.未解决问题控制栏的高级自定义，比如图片中的进度条和时间，播放按钮，上一个视频，下一个视频，设置，音量等控件如何实现？如果有谁知道如何实现这个高级自定义控件条，请在评论区留下你的代码8.参考文章视频云网络播放器样式和组件自定义教程
