有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题

2019-12-12 23:52栏目:bob体育平台
TAG:

2.在场合中增添RawImage。(因为Image使用sprite渲染,rawImage是用texture渲染)

基本上无太大主题材料,以上八个难点一蹴而就方案在下文湖蓝文字区域,先介绍一下video Player应用,后续对那七个难点展开缓慢解决。

video.ontimeupdate = function () { getCurrentVideoPosition(); };

4.创造脚本PlayVodeoOnUGUI,核心代码:rawImage.texture = videoPlayer.texture,将要video的tuxture赋值给rawImage就会见到要播放的录制了

透过slider调节录像播放存在三个难点,一方面在update实时把videoPlayer.time 赋值给slider,一方面必要把slider的value反馈给time,要是用slider的OnValueChanged(float value卡塔尔国方法规设有冲突,引致难题。所以能够由此UI事件的BeginDrag和EndDrag事件

道理当然是那样的你也能够像在页面上应用其余元素相似,给Video对象动态加多属性可能挂事件,如:

unity中播放摄像步骤如下:

      //代码添加
        videoPlayer = gameObject.AddComponent<VideoPlayer>();
        //videoPlayer = gameObject.GetComponent<VideoPlayer>();
        audioSource = gameObject.AddComponent<AudioSource>();
        //audioSource = gameObject.GetComponent<AudioSource>();
        videoPlayer.playOnAwake = false;
        audioSource.playOnAwake = false;
        audioSource.Pause();

<bob体育平台,!DOCTYPE html>
<html xmlns=";
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<script type="text/javascript">
function timeUpdate() {
document.getElementById('time').innerHTML = video.currentTime;
}
function durationChange() {
document.getElementById('duration').innerHTML = video.duration;
}
function seekVideo() {
document.getElementById('video').currentTime = document.getElementById('seekText').value;
}
window.onload = function () {
var videoPlayer = document.getElementById("video");
videoPlayer.ontimeupdate = function () { timeUpdate(); };
};
</script>
<div>
<video id="video" controls="controls"
poster="./images/videoground1.png"
src="./videoSource/video1.mp4" width="450px" height="320px"
ondurationchange="durationChange()" />
</div>
<div>Time: <span id="time">0</span> of <span id="duration">0</span> seconds.</div>
<div>
<input type="text" id="seekText" />
<input type="button" id="seekBtn" value="Seek Video" onclick="seekVideo();" />
</div>
</body>
</html>

3.rawImage下增多videoPlayer组件,将录制赋给videoplayer,将其拖到video clip上。

          在调用摄像播放实现时事件loopPointReached(此处为借鉴外人称作,那一件事件实际并非摄像播放实现时的风浪),看名就能猜到其意义,那一件事件为达到录像播放循环点时的事件,即当videoplay 的isLooping属性为true(即循环播放摄像)时,录像截至时调用此措施,所以当摄像非循环播放时,那件事件在摄像停止时调用不到。要想调用此方法能够把录制安装为循环播放,在loopPointReached钦定的风浪中停播录像

代码如下:

1.将要播放的录像拖入projec。(注意:unity平常援救的摄像格式有mov, .mpg, .mpeg, .DVD,.avi, .asf格式  )

 

日子在做二个摄像播放的页面,在这之中使用了HTML5的Video对象,这几个是HTML5中新扩充的三个目标,协助多样分化格式的录制在线播放,作用相比较强硬,并且还增加了众多平地风波,能够由此JavaScript脚本来对摄像播放进行支配。参照他事他说加以侦查上边多少个链接:

比如使用插件AVPro Video所不寻常平常

不精晓是怎么着来头在Chrome上无法一向将ontimeupdate事件挂在Video成分上,而必得通过addEventListener方法来增多事件。可是add伊夫ntListener也宽容IE和Firefox浏览器,所以应当是通过的。

4)摄像甘休时事件激活

不过上边那行代码貌似在Chrome上无效,能够动用addEventListener来取代它:

 全代码

代码如下:

bob体育平台 1

点评:Video对象是HTML5中新扩张的一个指标,援助八种分歧格式的录制在线播放,作用相比强硬,Video对象足以因而ontimeupdate事件来报告当前的广播进程,上面为大家介绍下Video对象ontimeupdate事件的标题,感兴趣的对象能够参谋下哈

      录像截图时能够由此videoPlayer.texture,把图像保存下来可是供给把texture转换为texture2d,就算后面一个继续在前者,不过无可奈何逼迫转货回去,转换以致存款和储蓄图片代码如下:

代码如下:

       其实能够绝不那样管理,videoPlayer有texture变量,直接在update里面把texture值赋给RawImage的texture就可以,代码如下

Video对象能够透过ontimeupdate事件来报告当前的播报过程,同有的时候间经过该事件还是能够依照录制播放的处境来决定页面上的此外成分,例如随着录像播放的进度来切换章节、呈现额外音信等。上面是多少个事例:

版权声明:本文由bob体育app发布于bob体育平台,转载请注明出处:有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题