• 视频播放插件Video.js简单使用


    插件下载地址: http://www.jq22.com/jquery-info404

    Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link href="videojs/video-js.css" rel="stylesheet" type="text/css">
    <script src="videojs/video.js"></script>
    <script>
        videojs.options.flash.swf = "video-js.swf";
    </script>
    
    </head>
    <body>
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
          poster="MusicSystemData/MV/videopic/mvpic1.jpg"
          data-setup="{}">
        <source src="MusicSystemData/MV/video/mv10.mp4" type='video/mp4' />
        <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
        <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    </video>
    
    <script type="text/javascript">
        var myPlayer = videojs('example_video_1');
        videojs("example_video_1").ready(function(){
            var myPlayer = this;
            myPlayer.play();
        });
    </script>
    </body>
    </html>
    View Code

    1.在页面中引用video-js.cs样式文件和video.js

    <link href="videojs/video-js.css" rel="stylesheet" type="text/css">
    <script src="videojs/video.js"></script>

    2.设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件

    <script>
        videojs.options.flash.swf = "video-js.swf";
    </script>

    3.设置播放初始图

    poster="MusicSystemData/MV/videopic/mvpic1.jpg"

    4.设置视频路径,可使用三种视频格式 mp4, webm ,ogg

    <source src="MusicSystemData/MV/video/mv10.mp4" type='video/mp4' />

    5.设置进入页面自动播放

    <script type="text/javascript">
        var myPlayer = videojs('example_video_1');
        videojs("example_video_1").ready(function(){
            var myPlayer = this;
            myPlayer.play();
        });
    </script>



  • 相关阅读:
    ORA-01940: cannot drop a user that is currently connected解决方法
    Git基本用法简介
    C 入门 第十节 存储区
    C 入门 第九节 结构体指针
    C 入门 第八节 指针
    C 入门 第七节 结构体
    C 入门 第六节 自定义函数
    C 入门 第五节 多维数组 字符串数组
    C 入门 第四节
    C 入门 第三节
  • 原文地址:https://www.cnblogs.com/yeming/p/5300140.html
Copyright © 2020-2023  润新知