当前位置：首页 > news >正文

videoJs实现点击按钮播放切换视频

news 来源：原创 2024/5/5 1:01:27

先说一下啊！！博主并不会videoJs，只是使用其实现视频播放功能；不能解决好友的其他需求，请见谅！！！

链接是videoJs实现视频播放需要的js和css：

链接：https://pan.baidu.com/s/1geLvRUz 密码：ujix

下面是亲测demo,一个简单的demo:

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 7 <title>Insert title here</title>
 8 <!-- 播放器样式 -->
 9 <link href = "css/video-js.css" rel = "stylesheet" type = "text/css">
10 <!-- 如果要支持IE8 -->
11 <script type="text/javascript" src = "js/videojs-ie8.js"></script>
12 <!-- 播放器js -->
13 <script type="text/javascript" src = "js/video.js"></script>
14 <!-- Jquery插件 -->
15 <script type="text/javascript" src = "js/jquery-2.1.4.js"></script>
16 <script>
17     videojs.options.flash.swf = "/js/video-js.swf";
18 </script>
19 <script type="text/javascript">
20 
21 function Test(obj) {
22     var val = $(obj).val();
23     //sourceDom = $("<source src=\""+val+"\">");
24     $("#video-box video").prop("src",val);
25     //$("#video-box video").append("<source src=\""+val+"\">");
26     $("#video-box").show();
27     $("#video-box video").play()
28     
29 
30 }
31     function test(obj) {
32         var url = $(obj).val();
33         videojs.options.flash.swf = "__JS_/js/video-js.swf";
34         var myPlayer = videojs("example_video_1");
35         myPlayer.src(url);
36         myPlayer.load(url);
37     }
38 </script>
39 </head>
40 <body>
41 
42 <div id = "video-box">
43 <video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" 
44     poster="videoJs/hangge-clip.png" 
45     data-setup='{ techOrder: ["flash","html5"]}'>
46     <source src = "" type = "video/mp4" id = "videoURL">
47 </video>
48 </div>
49 <button id = "button" value="hangge.mp4" onclick = "test(this)">第一集</button>
50 <button id = "button" value="111.mp4" onclick = "test(this)">第二集</button>
51 <button id = "button" value="333.ogg" onclick = "test(this)">第三集</button>
52 </body>
53 </html>