引入Videojs之后,不能直接通过dom来调取video标签的play()方法解决方案

只要先定位到video标签的父类,然后再获取video标签即可。
例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8 />
    引入css和js
    <link href="http://localhost:8080/dpplayer/video-js.css" rel="stylesheet">
    <script src="http://localhost:8080/dpplayer/video.js"></script>
    <script src="http://localhost:8080/dpplayer/hls.js"></script>
    <script src="jquery-3.4.1.js" type="application/javascript"></script>
    <script type="application/javascript">
        function f() {
            let elementById = document.getElementById("video").getElementsByTagName("video")[0];
            elementById.play();
        }
    </script>
</head>
<body>
测试标签,当按下button才播放
<div id="video">
    <video muted class="video-js vjs-default-skin"
           data-setup='{}'>
        <source src="http://localhost:8080/dpplayer/1.m3u8" type="application/x-mpegURL">
    </video>
</div>

<button onclick="f()">按我</button>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
如果你不想使用 video.js 播放器库,你可以使用 React 自带的 `HTMLMediaElement` API 来实现多个 video 自带全屏并在点击全屏时调用方法。以下是一个使用函数组件的示例: ```javascript import React, { useRef, useState } from 'react'; function VideoPlayer(props) { const videoRef = useRef(null); const [isFullScreen, setIsFullScreen] = useState(false); const handleFullscreenChange = () => { setIsFullScreen(document.fullscreenElement === videoRef.current); if (document.fullscreenElement === videoRef.current) { // 进入全屏模式时调用的方法 } else { // 退出全屏模式时调用的方法 } }; const handleClickFullscreen = () => { if (!isFullScreen) { videoRef.current.requestFullscreen(); } else { document.exitFullscreen(); } }; return ( <div> <video ref={videoRef} className="video-js vjs-default-skin" controls onFullscreenChange={handleFullscreenChange}> <source src={props.src} type="video/mp4" /> </video> <button onClick={handleClickFullscreen}>全屏</button> </div> ); } export default VideoPlayer; ``` 在这个示例中,我们使用了 React 的 `useRef` 和 `useState` 钩子来引用 video 元素和跟踪全屏状态。我们在 video 元素上添加了 `onFullscreenChange` 事件监听器,该监听器将在进入或退出全屏模式时触发,并调用 `handleFullscreenChange` 方法。我们还添加了一个按钮来切换全屏模式,并在点击时调用 `handleClickFullscreen` 方法。 为了在应用中使用多个视频播放器,你可以在父组件中渲染多个 `VideoPlayer` 组件。例如: ```javascript import React from 'react'; import VideoPlayer from './VideoPlayer'; function App() { return ( <div> <VideoPlayer src="video1.mp4" /> <VideoPlayer src="video2.mp4" /> </div> ); } export default App; ``` 这将在应用中渲染两个视频播放器,每个播放器都可以自带全屏,并在进入或退出全屏模式时调用相应的方法

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

syf_wfl

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值