h五-video标签

2019-04-03 13:51栏目:ca888圈内

IOS

早期务须求有用户手势(user gesture)video标签才足以播放; 从版本10始于修改了video的条条框框,苹果放宽了inline和autoplay,策略如下(仅适用于Safari浏览器):

  • <video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.(无音频源的 video 成分 允许自动播放)
  • <video muted> elements will also be allowed to autoplay without a user gesture.(禁音的 video 成分允许自动播放)
  • If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.(借使 video 成分在并没有用户手势下有了音频源或然变成非禁音,会暂停止播放放)
  • <video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.(video 成分荧屏可知才开头播报)
  • <video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.(video成分不可见后终止播放)

浅谈html5 video 移动端填坑记,浅谈html5

本文介绍了html5 video 移动端填坑记,分享给大家,具体如下:

<video id="video" 
  style="object-fit:fill" 
  autoplay
  webkit-playsinline 
  playsinline 
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint" 
  src="video.mp4" />
</video>
<!--
  object-fit: fill   视频内容充满整个video容器
  poster:"img.jpg" 视频封面
  autoplay: 自动播放
     auto - 当页面加载后载入整个视频
     meta - 当页面加载后只载入元数据
     none - 当页面加载后不载入视频

  muted:当设置该属性后,它规定视频的音频输出应该被静音

  webkit-playsinline playsinline:   内联播放

  x5-video-player-type="h5" :  启用x5内核H5播放器
  x5-video-player-fullscreen="true"  全屏设置。ture和false的设置会导致布局上的不一样
  x5-video-orientation="portraint" :声明播放器支持的方向,可选值landscape 横屏,portraint竖屏。
                                     默认值portraint。无论是直播还是全屏H5一般都是竖屏播放,
                                     但是这个属性需要x5-video-player-type开启H5模式
-->

自动播放

设置autoplay属性

<video autoplay></video>

移步浏览器中

只是在成千成万平移浏览器里,都是讲求用户的实事求是操作来(touchend、click、doubleclick 或 keydown 事件等正规的风浪)触发调用video.play(),才能自动播放影音摄像。

 dom.addEventListener('click', function () {
   video.play()
})

微信中

也足以在  wx.ready()里触发video.play()

wx.ready(function () {
  video.play()
})

内联播放

设置属性 webkit-playsinline playsinline

<video id="video" webkit-playsinline playsinline /></video>

在iOS Safari和部分安卓的1对浏览器下播放录制的时候,不能够在h5页面中播放摄像,系统会活动接管摄像

设若须要在h5页面内广播录制,要求在视频标签上助长  webkit-playsinline,在iOS10事后,需求加上playsinline,提议还要加上那七个属性。同时还亟需app协理这种方式

webview.allowsInlineMediaPlayback = YES;

ios手Q和微信都帮助那种方式,可是android 微信就挂了

android 微信

android微信内置浏览器接纳腾讯X伍内核,不遵守X5web正经,video强制全屏正是其一。录像播放实现后还会并发QQ自身的录制推荐

流言,其有个白名单,白名单下的摄像能源,就不会全屏。不过腾讯一度不可能再充实白名单了。尿性,无解。。。。。。

此时此刻还有二个解决办法,正是行使h伍  canvas 播放 video

canvas 播放摄像

动用canvas 遭逢的坑:video 必须加 x五-video-player-type="h5" 属性,不然,在活动端就会卡死不能够播放摄像,个人认为是因为录制被接管的原委促成。

<div class="wrapper">
  <video id="video" style="display: none" autoplay src="video.mp4" x5-video-player-type="h5"></video>
  <canvas id="canvas"></canvas>
</div>
<script>
  var video = document.querySelector('#video')
  var canvas = document.querySelector('#canvas')
  var wrapper = canvas.parentNode
  var width = wrapper.offsetWidth
  var height = wrapper.offsetHeight
  var ctx = c.getContext('2d')
  var time = null
  canvas.width = width
  canvas.height = height

  canvas.addEventListener('click', function () {
    video.play()
  })

  video.addEventListener('play', function () {
      time = window.setInterval(function () {
        ctx.drawImage(v, 0, 0, width, height);
      }, 20);
  }, false);

  video.addEventListener('pause', function () {
      window.clearInterval(time);
  }, false);

  video.addEventListener('ended', function () {
      window.clearInterval(time);
  }, false);
</script>

最终发现,即使应用canvas播放摄像,android微信中能够遮挡全屏录制播放完的推荐介绍摄像。但是还不能明令禁止录制播放时 的全屏难题。依旧得万恶的白名单。吐槽。。。。。。。。。。。。。。。。
更坑爹的是从未有过找到js触发退出全屏的点子。

ios黑屏难题

ios 在广播录制时,会出现短暂的黑屏,然后符合规律展现。

缓解方式:

在摄像上层覆盖三个添加三个div并用一张图片填充,创立播放前加载假象。然后监听事件 timeupdate ,录制播放有画面时移除那些“div块”

video.addEventListener('timeupdate', function(){
  if(video.currentTime > 0.1){
      posterImg.hidden();
  }
})

Media 方法和性格

HTMLVideoElement和HTML奥迪oElement 均一而再自HTMLMediaElement

// 媒体错误
MediaObj.error; //null:正常
MediaObj.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

//媒体当前状态
MediaObj.currentSrc; //返回当前资源的URL
MediaObj.src = value; //返回或设置当前资源的URL
MediaObj.canPlayType(type); //是否能播放某种格式的资源
MediaObj.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
MediaObj.load(); //重新加载src指定的资源
MediaObj.buffered; //返回已缓冲区域,TimeRanges
MediaObj.preload; //none:不预载 metadata:预载资源信息 auto:

//准备状态
MediaObj.readyState;//1:HAVE_NOTHING 
                    //2:HAVE_METADATA 
                   //3.HAVE_CURRENT_DATA 
                  //4.HAVE_FUTURE_DATA 
                 //5.HAVE_ENOUGH_DATA
MediaObj.seeking; //是否正在seeking

//回放状态
MediaObj.currentTime = value; //当前播放的位置,赋值可改变位置
MediaObj.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
MediaObj.duration; //当前资源长度 流返回无限
MediaObj.paused; //是否暂停
MediaObj.defaultPlaybackRate = value;//默认的回放速度,可以设置
MediaObj.playbackRate = value;//当前播放速度,设置后马上改变
MediaObj.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
MediaObj.seekable; //返回可以seek的区域 TimeRanges
MediaObj.ended; //是否结束
MediaObj.autoPlay; //是否自动播放
MediaObj.loop; //是否循环播放
MediaObj.play(); //播放
MediaObj.pause(); //暂停

//视频控制
MediaObj.controls;//是否有默认控制条
MediaObj.volume = value; //音量
MediaObj.muted = value; //静音

//TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

//【★★★**相关事件**★★★】
//事件分发
var eventTester = function(e){
    Media.addEventListener(e,function(){
        console.log((new Date()).getTime(),e)
    },false);
}
//事件监听
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变

如上就是本文的全体内容,希望对我们的读书抱有扶助,也指望大家多多帮助帮客之家。

video 移动端填坑记,浅谈html5本文介绍了html5 video 移动端填坑记,分享给我们,具体如下: video id=video style=object-fit:fill autoplay w...

正文来源“小时光茶社(Tech Teahouse)”公众号

方法
autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose
duration
ended
error
exitFullscreen
init
isFullScreen deprecated
isFullscreen
language
load
loop
muted
pause
paused
play
playbackRate
poster
preload
remainingTime
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited

检查评定是还是不是自动播放?

幸好无论是 Safari 依然Chrome,在界定了自动播放的同时,提供了检验录制是还是不是能自动播放的体制,以便于开发者在意识不能自动播放时有备选方案:

var promise = document.querySelector('video').play(); if (promise !== undefined) { promise.catch(error => { // Auto-play was prevented // Show a UI element to let the user manually start playback }).then(() => { // Auto-play started }); }

1
2
3
4
5
6
7
8
9
10
var promise = document.querySelector('video').play();
 
if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

笔者简介:
文赫,20一伍年投入腾讯,作为前端开发工程师到场承办Q游戏公会,游戏为主,企鹅电游比赛等类别,具有丰裕的移动端支付和直播开发经历。

事件交互中驷不比舌使用的品质
  1. currentTime:播放举办到的时间点,单位为秒
  2. duration:录制总时间长度,单位为秒

气象叁:播放控制

video 成分有提供多少个表现事件供开发者控制录像播放,兼容性比较好的有 onended 、 __ontimeupdate、onplay、onplaying ,__稍微事件在分歧浏览器差异装备上的的展现情形并不1样,

例如:ios 下监听’canplay‘(是不是已缓冲了足足的多寡足以流畅播放),当加载时是不会接触的,即便__preload=”auto” __也没用,但在 pc 的 Chrome 调节和测试器下,是会在加载阶段就接触。ios 须求播放后才会触发。

柒. 摄像的全屏难点

赶上的1些意况
  1. 从不 <source> 成分且 src 属性为空时播放会触发 error 事件,状态码为4
    缓解:忽略 src 属性为空时的报错

  2. 播音达成会接触暂停
    消除:表明状态变量,随着具体操作更新境况,播放状态下才会执行暂停操作,甘休状态不执行

  3. 播音实现后重放会触发 seeking 和 seeked ,1般浏览器触发二遍, android 下uc浏览器触发多次
    解决:同上

  4. 一部分浏览器监听不到 seeking 和 seeked
    缓解:在 timeupdate 里来分析估摸用户表现

  5. 有的浏览器存在多次连接触发 seeking seeked 的动静
    缓解:时间戳 节流 等待最终三次

  6. seeking 和 seeked 与 timeupdate 须求确认保障不会同时履行
    涸泽而渔:监听到 seeking 触发,就不再实施 timeupdate 模拟
    度过的坑:小编曾思念在播报时直接判断出是还是不是协助 seeking ,格局是广播时设置 currentTime 为 0.0一 ,然后检查测试 seeking 属性,后来发觉浏览器在如此设置后的 seeking 属性值不平等

  7. 独家浏览器播放状态下不触发 seeking 和 seeked ,可是在重播的时候接触
    消除:申明状态变量,随着具体操作更新情形,截止状态不监听 seeking 触发
    å

Chrome 模拟器

加载成功:

ca888会员登录 1

点击播放:

ca888会员登录 2

3)使用伪全屏(样式全屏)

体制全屏的中坚是安装video标签的宽高,使其撑满整个webview,看上去像全屏壹样

不过因为录像壹般都以1陆:九的宽高比,所以在竖屏事态下不可能很好的实现铺满整个显示器

ca888会员登录 3

ca888会员登录 ,而1般用户进入页面基本都是竖屏,所以我们即将思考怎么让用户在竖屏点击全屏按钮时,能体会到像终端app壹样自动进入横屏全屏的感受,上边有二种方案

1.在用户点击全屏时候,通过css三属性旋转荧屏

经过css的transform,大家得以把dom成分旋转体现

经过-webkit-transform: rotate(90deg)并安装video的冲天为当前webview的宽窄,video的宽窄为当下webview的万丈来贯彻旋转全屏.

那种情势的显示没有太大标题,但因为是通过css控制的页面dom呈现,对于原生的上空不能够很好的控制,如系统的键盘

ca888会员登录 4

在拉起键盘输入弹幕的时候,键盘不受控制依然竖屏呈现了
假定页面不涉及与原生组件的互动,那么那种方案是一种很管用且包容性相比较好的方案

贰.用户在点击全屏时,通过js api来控制webview旋转横屏

在手Q里,大家和终极的同桌合营添加了控制webview横竖屏的接口
在用户点击全屏的时候,先判断当前是否横屏

    /**
     * 是否横屏
     */
    function isHorizontal() {       
        if (window.orientation != undefined) {        
            return (window.orientation == 90 || window.orientation == -90);
        } else {         
            return window.innerWidth > window.innerHeight;
        }
    }

//设置webview为横竖屏
 mqq.ui.setWebViewBehavior({         
      orientation: 0 //0是竖屏,1是横屏
 });

假诺是竖屏则强制webview旋转进入横屏,同时监听页面包车型客车resize方法,页面横竖屏变化的时候会触发那些措施,在这些艺术里再动态的调动video的宽高来铺满整个显示屏

ca888会员登录 5

注:

事先大家发现x伍插入了壹段js来恐吓录制的全屏的轩然大波

ca888会员登录 6

满意条件的video标签全屏时都会被X5接管,另向外调拨运输用webkitEnterFullscreen方法时,X五也会接管播放器。

设若发今后x五内核下不能够接纳伪全屏而被浏览器接管,能够问问下x5同事为你的域名开启白名单,不接管你域名下的录制播放

下边大家来探望那一个属性的作用:
  1. @ src:要嵌到页面包车型地铁录制的UHavalL。可选;你也得以运用video块内的 <source> 成分来钦赐要求嵌到页面包车型客车录制

  2. @ autoplay:布尔属性;钦命后,录像会马上自动开端广播,不会停下来等着多少载入停止

  3. @ controls:加上那天性子,Gecko 会提供用户控制,允许用户控制录制的播放,包蕴音量,跨帧,暂停/复苏播放

  4. @ poster:多个海报帧的UCR-VL,用于在用户播放如故跳帧在此之前呈现。假若属性未钦命,那么在第3帧可用之前5如何都不会显得;之后第叁帧就好像海报帧一样展现

  5. @ preload:该枚举属性目的在于告诉浏览器我认为达到规定的标准最棒的用户体验的点子是怎么着。可能是下列值之1:
    none:提醒小编认为用户不须要查阅该录像,服务器也想要最小化访问流量;换句话说便是提示浏览器该摄像不要求缓存
    metadata:提醒尽管小编认为用户不要求查阅该摄像,但是抓取元数据(比如:长度)照旧很合理的
    auto:用户供给那个录制优先加载;换句话说就是投砾引珠:固然需求的话,能够下载整个视频,就算用户并不一定会用它
    空字符串:也就代指 auto 值

  6. @ buffered:那个脾气能够读取到哪段时日限定内的媒体被缓存了。该属性包括了贰个TimeRanges 对象

  7. @ played:八个 提姆eRanges 对象,指明了摄像已经播放的持有范围

  8. @ loop:布尔属性;钦赐后,会在视频结尾的地点,自动重返摄像先导的地点

九@muted:布尔属性,指明了摄像里的节奏的暗中认可设置。设置后,音频会伊始化为静音。私下认可值是 false ,意味着录制播放的时候音频也会播放

  1. @ height:录制呈现区域的莫斯中国科学技术大学学,单位是 CSS 像素

  2. @ width:录像展现区域的宽度,单位是 CSS 像素

  3. @ crossorigin:该枚举属性指明抓取相关图片是不是必须用到COXC90S(跨域能源共享)。 援救COLANDS的资源 可在 <canvas>成分中被圈定,而不会被污染。允许的值如下:
    anonymous:跨域请求会被执行,但是不发送凭证。
    use-credentials:跨域请求A cross-origin request会被实践,且凭证会被发送。

  4. @ TimeRanges 对象表示事件段,比如,录制快进的时辰段,有1个 length 属性,表示时间段的个数,有多少个措施 start() 和 end() ,分别再次回到时间段开始的时间点和了结的时日点

  5. @ webkit-playsinline和playsinline:录制播放时局域播放,不脱离文书档案流 。然则那性格子相比尤其, 须要安置网页的APP比如WeChat中UIwebview

    的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback

    YES,才能奏效。换句话说,假诺APP不设置,你页面中加了那标签也对事情未有什么益处,那也正是为啥安卓手机WeChat 播放录制总是全屏,因为APP不支持playsinline,而ISO的WeChat却帮忙。
    此间就要补充下,假诺是想做全屏直播可能全屏H五体验的用户,IOS要求安装删除 webkit-playsinline 标签,因为您设置 false 是不协助的 ,安卓则不需求,因为暗中认可全屏。但那时全屏是有广播控件的,无论你有未有设置control。 做直播的恐怕用得着播放控件,但是全屏H5是不须要的,那么去除全屏播放时候的控件,须要以下设置:同层播放。

  6. @ x-webkit-airplay="allow"暂时不恐怕适用的知情其意义,猜度,那特性情应该是使此录制协助ios的AirPlay功用。使用AirPlay能够一向从利用iOS的设施上的例外岗位播放摄像、音乐还有照片文件,约等于说通过AirPlay功效能够兑现影音文件的有线广播,当然前提是广播的终极设备也要辅助相应的效率。

  7. @ x五-video-player-type:启用同层H伍播放器,正是在录制全屏的时候,div能够呈现在录制层上,也是WeChat安卓版特有的性质。同层播放小名也号称沉浸式播放,播放的时候看似全屏,可是曾经除去了control和微信的导航栏,只留下"X"和"<"两键。最近的同层播放器只在Android(包蕴微信)上生效,临时不支持iOS。至于为何同层播放只对安卓开放,是因为安卓不能够像ISO一样局域播放,私下认可的全屏会使得1些界面操作被阻挡,借使是全屏H伍辛亏,不过做直播以来,诸如弹幕那样的效果就不也许兑现了,所以那时候同层播放的概念就缓解了这几个题材。可是在测试的进度中发觉,区别版本的IOS和安卓效果略有分裂。

  8. x五-video-orientation:注脚播放器协理的自由化,可选值landscape 横屏, portraint竖屏。私下认可值portraint。无论是直播依旧全屏H5壹般都以竖屏播放,但是那一个天性要求x五-video-player-type开启H5格局

  9. @ x伍­-video­-player­-fullscreen:全屏设置。它又四个属性值,ture和false,true扶助全屏播放,false不协理全屏播放。
    事实上,IOS 微信浏览器是Chrome的根本,相关的习性都帮忙,也是干吗X5同层播放不协理的原因。安卓微信浏览器是X5内核,一些质量标签比如playsinline就不援救,所以一贯全屏。

  10. @ 还有个难点,在Android的微信里面,固然加上了地方的性质,还会出现前后有黑边,不能够全屏的题材。
    化解办法:给video加上object-fit: fill;的style属性。若是依然有黑边有一点都不小希望是录像尺寸不合适。

playsinline 撤销全屏

只要想实现不全屏播放,只需在video标签加个 playsinline 属性即可,这些性格在__基于webkit内核的位移端浏览器__主导没难题,实在分外就再加个 webkit-playsinline :

<video src={videoUrl} webkit-playsinline="true" playsinline="true" />

1
2
3
4
5
<video
    src={videoUrl}
    webkit-playsinline="true"
    playsinline="true"
  />

那么对于任何基本的浏览器要怎么处理吧?这一年要询问下近日市面上存在的浏览器有如何。

一. 自动播放难点

  • 通过autoplay属性
    录像的自动播放供给在video标签上添加autoplay属性, 如:

      <video autoplay><video/>
    

    但是在众多浏览器里,如iOS下并不帮助那些个性,在iOS下必须给webview设置

    self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;
    

    才能让那本特性生效从而让用户一进入页面就起始摄像的自动播放

  • 经过一向调用video.play()方法
    在局地动静下我们想进入1些判定逻辑,如判断用户互联网环境,在wifi下自动播放,在4g条件下交给提醒,那中状态下就符合直接当选video并调用video.play来播放录像

video标签的一些属性
  <video
    id="my-video"
    src="test.mp4"
    controls = ""    /*禁掉默认控制条-- 必要*/
    poster="poster.jpg"  /*视频封面*/
    preload="auto"  /*预加载*/
    webkit-playsinline="true"  /*iOS 10中设置可以让视频在小窗内播放*/
    playsinline="true"
    x-webkit-airplay="allow"  /*启用AirPlay支持*/
    x5-playsinline
    x5-video-player-type="h5"  /*对于x5内核声明启用同层H5播放器*/
    x5-video-player-fullscreen="true"   /*全屏设置设置为 true 是防止横屏*/
    x5-video-orientation="portraint"  /*播放器的方向,默认为竖屏*/
    x5-video-orientation="portraint" /*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
    style="object-fit:fill" /*去除黑边*/
    >
   </video>

思考

总结:

在经验过各样优化和调整后,我们能够在h伍直播页做到看直播,看弹幕,发弹幕,发送礼物,表情,查看排行等种种作用,再同盟上手Q里的隐藏titlebar的_wv=167772一七,能够兑现全屏播放效果,做到了比美原生播放的经验。

现行的h5的广播还有为数不少的显示和兼容性的难点,希望那份指南能够帮你在境遇相同的坑时能尽快爬出来,并优化你的h5播放体验,吸引到更多的用户 : D


更加多美丽内容欢迎关注腾讯 Bugly的微信公众账号:

ca888会员登录 7

腾讯 Bugly是壹款专为移动开发者塑造的质量监督工具,扶助开发者快捷,便捷的定位线上利用崩溃的动静以及化解方案。智能合并功效协助开发同学把每一天上报的数千条 Crash 依照根因合并分类,每一日日报会列出影响用户数最多的崩溃,精准定位作用协助开发同学定位到出难题的代码行,实时报告可以在公布后神速的垂询应用的成色境况,适配最新的 iOS, Android 官方操作系统,鹅厂的工程师都在动用,快来加入我们呢!

常用多少个项有:
autoplay :  true/false   
//播放器准备好之后,是否自动播放 【默认false】If true/present as an attribute, begins playback when the player is ready

controls : true/false 
//是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮

height: 300px
//视频容器的高度,字符串或数字 单位像素  比如: height:300 or height:'300px'

width: 300px
//视频容器的宽度, 字符串或数字 单位像素

loop : true/false //视频播放结束后,是否循环播放

muted : true/false //是否静音

poster: 播放前显示的视频画面,播放开始之后自动移除。通常传入一个URL

preload:auto//预加载
   auto //自动
   metadata //元数据信息 ,比如视频长度,尺寸等
   none  //不预加载任何数据,直到用户开始播放才开始下载

children: Array | Object  
//可选子组件  从基础的Component组件继承而来的子组件,数组中的顺序将影响组件的创建顺序哦。

// 下面的方式只使用bigPlayButton和controlBar两个子组件
videojs('my-player', {
 children: [
     'bigPlayButton',
     'controlBar'
     ]
});

sources:Array //财富文件

  videojs('my-player', {
      sources: [{
          src: '//path/to/video.mp4',
          type: 'video/mp4'
          }, {
          src: '//path/to/video.webm',
          type: 'video/webm'
        }]
    });

等价于html中的情势:

<video ...>
    <source src="//path/to/video.mp4" type="video/mp4">
    <source src="//path/to/video.webm" type="video/webm">
</video>

techOrder: Array //使用哪种技术播放,可选值有'html5','flash'  默认为['html5'], 注意: 在v6.0.0 及以上的版本中,默认不包含flash的使用代码。如果要使用flash播放的,需要手动引入flash相关逻辑的代码。且需要指定swf文件的路径。
// 全局指定swf文件的位置
videojs.options.flash.swf = 'video-js.swf'
    // Create a player.
    var player = videojs('example_video_1',{
        teachOrder:['flash']
        },function(){
          console.log(this)
        }
     });

移动端

1)全屏api

h五暴光了一个webkitRequestFullScreen方法,能够让各种dom都呼吁全屏,当然video标签也足以应用。

只是在测试中发觉,壹些安卓机不帮忙该属性,如OPPO手提式有线电电话机,所以须要在调用的时候进行一下论断

var player = $('#player')[0];if (player.webkitSupportsFullscreen) {
    player.webkitEnterFullscreen();
} else {
   player.webkitRequestFullScreen();
}
组件
  Player
      PosterImage
      TextTrackDisplay
      LoadingSpinner
      BigPlayButton
      ControlBar
          PlayToggle
          FullscreenToggle
          CurrentTimeDisplay
          TimeDivider
          DurationDisplay
          RemainingTimeDisplay
          ProgressControl
              SeekBar
                LoadProgressBar
                PlayProgressBar
                SeekHandle
          VolumeControl
              VolumeBar
                  VolumeLevel
                  VolumeHandle
          MuteToggle


//eg:移除静音按钮
var player = videojs(‘video-id‘, {
  controlBar: {
    muteToggle: false
  }
});

版权声明:本文由ca888发布于ca888圈内,转载请注明出处:h五-video标签