視頻播放插件Video.js簡單使用

本文轉載自查看原文 2016-03-20 23:00 2695 JavaScript

插件下載地址： 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 video.js視頻播放插件 HTML5視頻播放插件Video.js使用詳解【vue】使用 Video.js 播放視頻 Jquery視頻播放插件video.js & Vue中使用Videojs播放插件 HTML5視頻播放插件 video.js介紹使用video.js 7在html中播放rtmp視頻流 Web視頻播放之video.js vue組件-視頻播放之video.js video.js視頻播放器 js插件---video.js如何使用