Question

使用此html代码读取视频文件并在浏览器中播放。我希望视频时间戳能够动态显示，但是浏览器中什么也没显示。

<title>VIDEO PLAY</title>

<script src="http://vjs.zencdn.net/4.6.1/video.js"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>

<body>

    <h1>VIDEO  PLAY</h1>

    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
      data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
        <source src="movie.m4v" type='video/mp4' />
        <track src='br.srt' kind="subtitles" srclang="en" label="English" default />
    </video>

    <script type="text/javascript">
        var vid = document.getElementById("my_video_1");
        var curTime=vid.currentTime;
    </script>

    <h1>
          the value for number is:
        <script type="text/javascript">
            document.write(curTime)
        </script>
    </h1>

</body>

Answer 1

只需在decimal RateOfResolution = (decimal)videoSource.VideoResolution.FrameSize.Width / (decimal)videoSource.VideoResolution.FrameSize.Height; int openGLwidth = (this._Screenwidth / 3) - 40; int openGLheight = Convert.ToInt32(screenWidthbyThree / RateOfResolution); glControl.Width = openGLwidth; glControl.Height = openGLheight; GL.Viewport(new Rectangle(0, 0, glControl.Width, glControl.Height)); public void CreateShaders() { /***********Vert Shader********************/ vertShader = GL.CreateShader(ShaderType.VertexShader); GL.ShaderSource(vertShader, @"attribute vec3 a_position; varying vec2 vTexCoordIn; void main() { vTexCoordIn=( a_position.xy+1)/2 ; gl_Position = vec4(a_position,1); }"); GL.CompileShader(vertShader); /***********Frag Shader ****************/ fragShader = GL.CreateShader(ShaderType.FragmentShader); GL.ShaderSource(fragShader, @"precision highp float; uniform sampler2D sTexture; varying vec2 vTexCoordIn; void main () { vec2 vTexCoord=vec2(vTexCoordIn.x,vTexCoordIn.y); float rightsliderStartval=0.6;//0.5 to 1.0 float rightsliderEndval=0.8;//1.0 to 0.5 float rightsliderDelta=rightsliderEndval-rightsliderStartval; if (vTexCoordIn.x < 0.5) discard; float u = mix(rightsliderStartval, rightsliderEndval, (vTexCoordIn.x-0.5) * 2.0); vec4 color = texture2D(sTexture, vec2(u, vTexCoordIn.y)); gl_FragColor = color; }"); GL.CompileShader(fragShader); }之后添加即可解决

</video>

Answer 2

您应该使用事件“ dateupdate”：

function formatTime (time) {
    let t = parseInt(time);
    return parseInt(t/60) + ':' + (t%60 < 10 ? '0' + t%60 : t%60);
}

function setCurrentTime () {
    let currentTime = getElementsByClassName('current-time')[0];
    currentTime.innerHTML = formatTime(video.currentTime);
}

EventUtil.addHandler(video, 'timeupdate', getCurrentTime);

如何在html5 js中动态显示视频时间戳

2 个答案: