• 视频播放插件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>



  • 相关阅读:
    Javascript online compressor
    Asp.net mvc 3 JSON post & AOP
    Javascript Clone
    LiveRTMP之对接海康、大华等IPCamera SDK进行RTMP直播推送
    H5实现视频监控网络直播时前端自动适配
    监控物联网直播时遇到iOS无法播放HLS流的问题解决
    LivePlayer RTSP/RTMP/HTTP/HLS全功能播放器
    [转载]LivePlayer实现直播抓拍
    LiveRTMP内置IPCamera实现RTMP直播摄像机功能
    使用LiveNVR实现RTSP视频监控、直播推送
  • 原文地址:https://www.cnblogs.com/yeming/p/5300140.html
Copyright © 2020-2023  润新知