video.js基本用法

我最帅气257

已于 2022-07-04 19:21:28 修改

阅读量1.8k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2021-06-09 14:20:22 首次发布

本文链接：https://blog.csdn.net/weixin_56115652/article/details/117741244

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频播放插件video.js</title>
    <link rel="stylesheet" href="./video-js.css">
</head>
<body>
        <!-- Video.js 7.11.4   版本号  http://videojs.com/    -->
        <!-- controls   开始默认播放控件 -->
        <!-- poster="MY_VIDEO_POSTER.jpg"  开始页面的默认界面 -->
        <!-- class="vjs-big-play-centered "  开始默认播放控件在界面中居中 -->
        <!-- "playbackRates": [0.5,1, 1.5, 2]  视频倍数播放插件 -->
        <!-- loop : true  当前视频是否循播放 -->
    <video  id="my-video"
    class="video-js vjs-big-play-centered "
    controls  
    preload="auto"
    width="650"
    height="264"
    poster="../img/01 (1).JPG"
    data-setup='{"playbackRates": [0.5,1, 1.5, 2]}'
    >
    <source src="./oceans.mp4" type="video/mp4" />
    </video>
    <script src="./video.min.js" type="text/javascript"></script>
    <script  type="text/javascript">
    // 自动播放控件开始
    //  var myPlayer = videojs('my-video');
    //      videojs("my-video").ready(function(){
    //     var myPlayer = this;
    //     myPlayer.play();
    // });
    // 自动播放控件结束
    </script> 
</body>
</html>

H5页面在ios上去掉插默认视频播放插件的案例
<video id="my-video" class="video-js vjs-big-play-centered " preload="auto" controls="false"
						webkit-playsinline="true" playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5"
						x5-video-player-fullscreen="true" x5-video-ignore-metadata="true" width="100%"
						poster="./images/img/tv.png" data-setup='{"playbackRates": [0.5,1, 1.5, 2]}'>
						<source src="https://ideal.chinaceotv.com//2021/video/job.mp4.mp4" type="video/mp4" />
					</video>

vue 的video.js用法
npm 下载（下载指定的版本，新版本不太友好）
npm install videojs@5.8.2 --save

解决video标签播放m3u8格式视频失败问题

 1. 引入videoJS插件样式文件；   引入videoJS插件JS文件；   引入videoJS插件播放m3u8格式视频的HLS功能。

<link href="./video-js.css" rel="stylesheet">
<script src="./video.js"></script>
<script src="./videojs-contrib-hls.min.js"></script>

// videojs 简单使用
videojs('myVideo', {
    bigPlayButton: true,
    textTrackDisplay: false,
    posterImage: false,
    errorDisplay: false
})
function changeVideo(url){
    var player = videojs('myVideo');
    player.pause();
    player.dispose();
    document.getElementById('videobox').innerHTML = '';
    var str2 = `<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="300" height="250">
        <source id="source" src="${url}" type="application/x-mpegURL">
    </video>`;
    document.getElementById('videobox').innerHTML = str2;

    videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false
    },function(){
        this.play();
    })
}

注意
videoJS的初始化很容易第一步实现；
由于实现videoJS的视频切换，不能等同于常规的mp4等格式视频，直接切换地址，而是需要在点击切换的时候进行销毁原来的videoJS；
重新添加一个video标签，对其赋值视频路径；
添加到页面后进行再次初始化！
参考地址    https://blog.csdn.net/m0_38082783/article/details/82148862

我最帅气257

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
video.js基本用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>视频播
复制链接

扫一扫