video.js 视频播放js插件


video.js 视频播放js插件

第一步引入bfwone

第二步执行插件代码

先要设置语言

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["video.min", "video.min"], function() {
                //设置语言为中文
                videojs.addLanguage("zh-CN", {
                    "Play": "播放",
                    "Pause": "暂停",
                    "Current Time": "当前时间",
                    "Duration Time": "时长",
                    "Remaining Time": "剩余时间",
                    "Stream Type": "媒体流类型",
                    "LIVE": "直播",
                    "Loaded": "加载完毕",
                    "Progress": "进度",
                    "Fullscreen": "全屏",
                    "Non-Fullscreen": "退出全屏",
                    "Mute": "静音",
                    "Unmute": "取消静音",
                    "Playback Rate": "播放码率",
                    "Subtitles": "字幕",
                    "subtitles off": "字幕关闭",
                    "Captions": "内嵌字幕",
                    "captions off": "内嵌字幕关闭",
                    "Chapters": "节目段落",
                    "You aborted the media playback": "视频播放被终止",
                    "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
                    "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
                    "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。",
                    "No compatible source was found for this media.": "无法找到此视频兼容的源。",
                    "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密,无法解密。"
                });
                var myPlayer = videojs('my-video');
                videojs("my-video").ready(function() {
                    var myPlayer = this;
                    myPlayer.play();
                });


            });
        });
    </script>
    <style>
        body {
            background-color: #191919
        }
        .m {
            width: 960px;
            height: 400px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="m">
        <video id="my-video" class="video-js" controls preload="auto" width="960" height="400" poster="m.jpg" data-setup="{}">
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
            <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
            <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
        </video>
    </div>
</body>
</html>


立即下载video.js查看所有js插件

网友评论0

程序员在线工具箱