videojs简单使用

videojs简单使用

video js可以解析很多格式的视频，包括m3u8，这里简单介绍一下如何使用，主要是基于如何用js操作。

导入包

<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

主要的是video的js和css以及jq，至于bootstrap为了简单的样式，可以不管。

写一个占位的html

<div class="container" >
    <div class="row">
    	<div class="col-md-4" id="movie_url_area"><input type='text' class='form-control' id='movie_url' placeholder='地址m3u8'></input></div>
    	<div class="col-md-4" id="update_url_btn_area"><button type='button' class='btn btn-primary' id = 'update_url_btn' >按钮</button></div>
	</div>
	<div class="row">
        <div class="col-md-12" id="video_area">
			<video id="my_video" class="video-js" controls preload="auto" width="960" height="400" data-setup="{}" >
			        <p class="vjs-no-js">Not support</p>
			</video>
        </div>
      </div>
</div>

这里面最关键的是<video id="my_video"这个标签，其他的也可以先不管。

videojs 基本操作

首先我们可以通过

来给我们的video赋一个视频源，这里是m3u8的地址，当然也可以是其他的。这样你再刷新界面就会看到视频了，可以通过点击播放来播放等。

除了src之外，videojs还有一些其他的属性，比如当前播放时间，你可以通过console.log(videojs("my_video").currentTime());来查看当前播放的时间。也可以通过videojs("my_video").currentTime(12)来设置当前播放的时间，单位是秒。

videojs常见事件

	videojs("my_video").on("play",function()
    {
            console.log("视频开始播放");
    });
    videojs("my_video").on("pause", function(e){
            console.log("视频暂停播放")
    });
     videojs("my_video").on("seeked",function(){
     		console.log("视频跳转结束");
    });
     videojs("my_video").on("seeking",function(){
     	console.log("视频跳转中")
     });
    videojs("my_video").on('timeupdate', function() {
		console.log("时间更新中")
    });

上面是一些其常见的事件，注意的是，当你进行一个拖动的操作，其具体的过程是：

视频暂停播放–>视频跳转中–>视频跳转结束–>视频开始播放

所以其实跳转操作也会引发暂停和开始播放的事件。

videojs一个小问题设置时间不生效

如果我们在更更新完url，然后就进行播放并设置时间，会发现这个设置的时间无效，并不会起作用：

    $(document).on("click","#update_url_btn", function () {
        var movie_url = $("#movie_url").val();
        videojs("my_video").src(movie_url);
        videojs("my_video").play();
        videojs("my_video").currentTime(20)
        console.log(videojs("my_video").currentTime());
    });

这是因为在设置时间的时候，我们的视频还没有加载完成，所以无效，视频加载完成的事件可以通过下面的事件捕捉：

    videojs("my_video").on('loadedmetadata', function() {
		console.log('loadedmetadata-视频源数据加载完成')
	});

其实这个问题的解决方案可以通过一下方案解决：

1、把设置时间的语句放到加载完成这个事件里面。

2、在播放后，可以等一段时间再设置时间：

videojs("my_video").play();
setTimeout(function(){
        	console.log("设置时间")
        	videojs("my_video").currentTime(30)}, 100);

参考：

https://blog.csdn.net/qq285679784/article/details/103455097

https://blog.csdn.net/LLittleF/article/details/82781303

https://blog.csdn.net/Q147351/article/details/106663908